10 Awful IE Bugs and Fixes

原文出處http://www.queness.com/post/683/10-awful-ie-bugs-and-fixes
10 Awful IE Bugs and FixesAuthor: kevin | Source: queness

1. IE6 GHOST TEXT BUG
觸發情況: 兩個相連的html comment在IE6上容易導致此情況
解決方法:
a.使用將comment包起來
b.將comment移除
c.在發生此情況的標籤中 加上display:inline
d.在浮動的div上使用適當的邊界
e.在原本的字上加上空白鍵&nbsp(10字)左右

2.position relative and overflow hidden
問題:http://snook.ca/archives/html_and_css/position_relative_overflow_ie/
觸發情況:母組件set overflow:hidden;子組件:position:relative;
解決方法.母組件: set position:relative;

3.Min-Height for IE6
問題:討厭的IE6會自動忽略min-height 這個css屬性
解決方法:加上 !important
(這招好用......但有點用爛了)
延伸閱讀:
http://www.dustindiaz.com/min-height-fast-hack/

4.Bicubic Image Scaling
問題:在IE6的縮圖比較醜
解決方法 img{-ms -interpolation-mode: bicubic;}

5.PNG Transparency
超級常遇到
解決方法:img {filter: progid:DXImageTransform.Microsoft.AlphaImageLoder(....);}
特別注意:: if you use a PNG as background, you will not able to set the background position.

6.IFrame Transparent Background
IE不會自動把IFrame的背景預設為無
所以要加上這個語法

CSS
body{ background-color:transparent;}

7.Disabled IE default Vertical Scroll Bar
解決方法:overflow:auto;

8.IE6只支援:hover 的Pseudo 類別
想要有其他 可以用jquery來實現

9.Box Hack Model
IE6以及更舊的版本 預設的WIDTH值 並不會加入Padding 與 Border
HACK WAY!
#aaa{padding:10px;border:1px solid;width:200px;width:108px;}
===
上面那段...我自己的方法會在後面寫個_width:00px;專門給ie6看
===

10. Double Margin Bug Fix
#aaa{float:left;width:200px;margin-left:10px;
/*新增下列這行fix double margin error*/
display:inline;}

下篇預告
20 Best CSS Tips and Tricks Collection
http://www.queness.com/post/291/20-best-css-tips-and-tricks-collection