開發前端的同學一定都知道,IE6 是相容 BUG 多的瀏覽器,它不支援 PNG alpha 通道暫且不論。其檔案的解析理解規範也引起了諸多惱人的 BUG,有時甚至讓人感到絕望。本文主要講解一些比較容易遇到的 IE6BUG,以及解決的辦法。

一、 IE6 雙倍邊距 bug

當頁面上的元素使用 float 浮動時,不管是向左還是向右浮動;只要該元素帶有 margin 畫素都會使該值乘以 2,例如 “margin-left:10px” 在 IE6 中,該值就會被解析為 20px 。想要解決這個 BUG 就需要在該元素中加入 display:inline 或 display:block 明確其元素型別即可解決雙倍邊距的 BUG

二、 IE6 中 3 畫素問題及解決辦法

當元素使用 float 浮動後,元素與相鄰的元素之間會產生 3px 的間隙。詭異的是如果右側的容器沒設定高度時 3px 的間隙在相鄰容器的內部,當設定高度後又跑到容器的相反側了。要解決這類 BUG 的話,需要使佈局在同一行的元素都加上 float 浮動。

三、 IE6 中奇數寬高的 BUG

IE6 中奇數的高寬顯示大小與偶數高寬顯示大小存在一定的不同。其中要問題是出在奇數高寬上。要解決此類問題,只需要儘量將外部定位的 div 高寬寫成偶數即可。

四、 IE6 中圖片連結的下方有間隙

IE6 中圖片的下方會存在一定的間隙,尤其在圖片垂直挨著圖片的時候,即可看到這樣的間隙。要解決此類問題,需要將 img 標籤定義為 display:block 或定義 vertical-align 對應的屬性。也可以為 img 對應的樣式寫入 font-size:0

五、 IE6 下空元素的高度 BUG

如果一個元素中沒有任何內容,當在樣式中為這個元素設定了 0-19px 之間的高度時。此元素的高度始終為 19px 。

解決的方法有四種:

1. 在元素的 css 中加入:overflow:hidden

2. 在元素中插入 html 註釋:

3. 在元素中插入 html 的空白符: 

4. 在元素的 css 中加入:font-size:0

六、重複文字的 BUG

在某些比較複雜的排版中,有時候浮動元素的後一些字元會出現在 clear 清除元素的下面。

解決方法如下:

1. 確保元素都帶有 display:inline

2. 在後一個元素上使用 “margin-right:-3px

3. 為浮動元素的後一個條目加上條件註釋,xxx

4. 在容器的後元素使用一個空白的 div,為這個 div 指定不超過容器的寬度。

七、 IE6 中 z-index 失效

具體 BUG 為,元素的父級元素設定的 z-index 為 1,那麼其子級元素再設定 z-index 時會失效,其層級會繼承父級元素的設定,造成某些層級調整上的 BUG 。詳細解釋可以閱讀 IE6 中部分情況下 z-index 無效的原因,以及解決辦法

結語:實際上 IE6 中,很多 BUG 的解決方法都可以使用 display:inline 、 font-size:0 、 float 解決。因此我們在書寫程式碼時要記住,一旦使用了 float 浮動,就為元素增加一個 display:inline 樣式,可以有效的避免浮動造成的樣式錯亂問題。使用空 DIV 時,為了避免其高度影響佈局美觀,也可以為其加上 font-size:0 這樣就很容易避免一些相容上的問題。