IE6 bug總結

隨着IE8的問世，微軟終於開始將其瀏覽器向標準化靠攏，而且其市場佔有率已經接近於Chrome了，但由於IE6及IE7仍然佔有巨大的市場份額，在此我總結一下主要關於IE6/7的bug。

1. 雙倍浮向Bug
這 個bug在IE6及更低版本的瀏覽器中存在。當IE6及更低版本的瀏覽器在解析浮動元素時，會錯誤地把浮向邊邊界(margin)加倍顯示。修復這個 bug的方法很簡單，只需要將元素的display屬性設置爲inline就行了。因爲浮動元素自動以塊狀顯示，而設置display:inline在這 裏似乎沒有作用，但卻可以修正這個bug。

這裏值得注意的是這裏被加倍的margin是指浮向邊的margin，例如設置元素float:left，則margin-right不會被加倍，只有margin-left會被加倍顯示，我們也可以利用這一點來避免此bug。

2. 多出3像素bug
這個bug在IE6及更低版本的瀏覽器中存在。當IE6及更低版本的瀏覽器在解析浮動元素與流動文本環繞時，流動元素會莫名其妙的多生出3像素寬的補白(padding)。
解決方法一：
對浮動元素設置display:inline-block;
此方法缺點：如果在浮動元素上/下方同時存在另一個非浮動元素，會造成兩元素邊框無法對齊。
解決方法二：
使用過濾器*html #float{height:1%;}(IE6或更低)
爲流動元素定義任意高度，迫使其擁有佈局，IE具有自適應高度特性。
解決方法三：
如果浮動元素是圖像：
*html #float{
****margin:0 -3px; /*IE 5.X*/
****ma/rgin:0; /*IE6*/
}

3. 多餘字符bug
這 個bug在IE6中存在。有些人說解決此類問題的方法是不要在浮動元素中添加註釋，但註釋在代碼過程中不可避免，我們無法控制何時會出現註釋。我研究了一 下，其實有一個方法可以解決這個問題，那就是利用margin負值，我還不確定這個bug與上面提到的多出3像素bug是否有關聯，但如果對 float:left的元素，設置margin-right:-3px卻是可以解決這個bug的。

4. 定位bug
這個bug在IE6及更低版本的瀏覽器中存在。IE6及更低版本瀏覽器對於沒有指定高度的相對元素，不能正確解析它內部元素的決定定位。解決的方法是利用過濾器技巧爲IE6及更低版本瀏覽器定義一個高度強迫相對元素擁有佈局屬性。
*html #box{height:1%;}

5. 捉迷藏bug
這 個bug在IE6中存在。在特定條件下，標準佈局頁面被刷新或重新下載時，會發現某些內容消失了，當再次刷新或選中時纔會顯示出來，原來它們都隱藏在父元 素背景之後。出現這種bug多因爲浮動元素與流動元素混合佈局，後面元素又被設置了clear屬性。如果設置了父元素背景色，當加載頁面時，流動元素內的 內容可能會隱藏在父元素下面而看不見。解決該bug的方法是，可以去除父元素的背景色，或爲父元素制定固定高度和寬度，也可以爲浮動元素和父元素定義 position:relative來避免此類問題發生。

6. 百分比bug
這個bug產生的原因是IE對百分比取值方式造成的。IE對百分比的計算式四捨五入方法，這種方法有時會造成100%大於100%的情況。