IE CSS Bug系列：背景溢位

伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的@daozen 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）

【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。

—————————————————————————–

受影響的版本

這個bug影響的瀏覽器版本：IE6

表現

背景從元素中溢位（leak），覆蓋文件流中接下去的其他元素。

教程日期

2009.7.17 11:36:49

描述

這個bug和內容消失bug有緊密的聯絡，甚至可能是同個原因的不同表現。CSS的初學者經常會一個特定的清除浮動元素在包含浮動的元素裡面。IE在這方面有所不同。在IE裡面包含浮動的元素必須有layout屬性。否則要不就會出現背景溢位bug，要不出現內容消失bug（躲貓貓bug）。至於發生哪一個決定於頁面渲染時清除浮動元素是否與浮動元素有所接觸以及在clearer元素之後或裡面是否有內容存在。另一方面，如果容器沒有layout的話也會有一個bug。

示例

由於這個bug的性質，示例在一個獨立的頁面上。產生這個bug的典型程式碼在下面展示。

HTML Code:

XHTML

<div id="container"> <p id="bugger">Floated</p> <p>Text</p> <div class="clearer"></div> </div> <div id="victim">Give me some of that background!!!</div>

1 2 3 4 5 6

<div id="container">     <p id="bugger">Floated</p>     <p>Text</p>     <div class="clearer"></div> </div> <div id="victim">Give me some of that background!!!</div>

CSS Code:

CSS

#container { background: #abc; } #bugger { float: left; width: 30%; } .clearer { clear: both; }

1 2 3 4 5 6 7

#container { background: #abc; }     #bugger {         float: left;         width: 30%;     }   .clearer { clear: both; }

當上述程式碼 在IE7以下的的瀏覽器中渲染時，#container的背景會溢位覆蓋#victim之上就像#victim設定了該背景一樣。當滾動該頁面時，這個bug就會消失。

 

解決方案

以下的解決方案按照方案型別排列。

解決方案（潔淨方案）

解決日期

2009.07.17

修復的版本

所以受影響的版本。

描述

這個問題來自於在IE當中沒有以正確的方式來包含浮動。用於清除浮動的元素在99.9%的情況下都是不需要的，不要使用它們。使用其他方法，IE中需要的是在包含浮動的元素中觸發layout。

雖然這是一個“潔淨方案”，我推薦你不要使用清除浮動的元素而是用下面的LS方法。以下是修復後的原始示例。

由於這個bug的性質，修復後的示例在獨立的頁面上，以下展示的是這個bug的典型的修復程式碼

HTML Code:

XHTML

<div id="container"> <p id="bugger">Floated</p> <p>Text</p> <div class="clearer"></div> </div> <div id="victim">Give me some of that background!!!</div>

1 2 3 4 5 6

<div id="container">     <p id="bugger">Floated</p>     <p>Text</p>     <div class="clearer"></div> </div> <div id="victim">Give me some of that background!!!</div>

CSS Code:

CSS

#container { background: #abc; } #bugger { float: left; width: 40%; } .clearer { clear: both; } #victim { float: left; }

1 2 3 4 5 6 7 8

#container { background: #abc; }     #bugger {         float: left;         width: 40%;     }   .clearer { clear: both; } #victim { float: left; }

HTML程式碼和和原始的一樣，即使你知道不應該使用清除浮動元素。

CSS程式碼有點不同。我們給#victim加上了{float:left:}。顯然這已經足夠來修復這個背景溢位bug，不過可以預見會遇到由浮動引起的額外的bug。所以使用LS方法會更理想。

解決方案（layout方案）

修復版本

所有受影響的版本

描述

就像我之前所說的一樣，這個問題來自於IE中沒有用合適的方法來包含浮動。清除浮動元素在99.9%的情況下都是不需要的，不要用它們。相反，使用其他方法，IE中需要的是給包含浮動的元素觸發layout。

為了展示上述所說的，我移去了不必要的清除浮動元素並使用了其他方法來包含浮動以修復原始示例。我在標準瀏覽器中用overflow屬性來包含浮動而在IE中則給#container觸發layout來包含浮動。

由於這個bug的性質，修復後的示例在獨立的頁面上，以下展示的是這個bug的典型的修復程式碼

HTML Code:

XHTML

<div id="container"> <p id="bugger">Floated</p> <p>Text</p> </div> <div id="victim">Give me some of that background!!!</div>

1 2 3 4 5

<div id="container">     <p id="bugger">Floated</p>     <p>Text</p> </div> <div id="victim">Give me some of that background!!!</div>

CSS Code:

CSS

#container { background: #abc; overflow: hidden; } #bugger { float: left; width: 30%; }

1 2 3 4 5 6 7 8

#container {     background: #abc;     overflow: hidden; }     #bugger {         float: left;         width: 30%;     }

Conditional Comments:

XHTML

<!--[if IE]> <style type="text/css"> #container { zoom: 1; } </style> <![endif]-->

1 2 3 4 5

<!--[if IE]>     <style type="text/css">         #container { zoom: 1; }     </style> <![endif]-->

如你所見，在我們移除了清除浮動的元素並對#container應用{overflow:hidden;}來包含浮動。我們同時用條件註釋的方法來觸發#content的layout，這是在IE中包含浮動的正確方法，也是預防背景移除bug的方法。閱讀haslayout教程來尋找最合適你的方法。