伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的 @szxw 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。
—————————————————————————–
列表元素背景不顯示的BUG
受影響版本
該BUG影響: IE6
表現
<li>,<dt>,<dd>等元素的背景不顯示
教程日期
2009-07-19 17:05:40 星期日
描述
舉個例子來說，對於一個<div>元素，將其設定position:relative。然後在<div>內新增<ul>，<ol>或者<dl>,並且給這些列表項設定背景。在IE下會發現背景不顯示。
示例
根據這個BUG特性構造的一個示例在一個單獨頁面上。
HTML 程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> </div> <div> <dl> <dt>Foo:</dt> <dd>Bar</dd> <dt>Baz:</dt> <dd>Ber</dd> </dl> </div> |
CSS 程式碼：
|
1 2 3 4 5 6 7 8 9 |
div { float: left; position: relative; clear: left; /* not related to the bug */ } dt, dd, li { background: #f00; } |
這個是一個佈局方面的BUG。因為IE瀏覽器不會將這些表單項拆分開，所以我們無法為表單項設定佈局。
解決方案
下面是按照解決方案型別排序的對上述問題的解決方案。
解決方案(最佳方案)
解決方案日期
2009-07-19 17:20:24 星期日
修復版本
所有受影響版本
描述
正如我前面提到的那樣，這個BUG可以確定是因為想要設定表單項的佈局。但是可能是因為給<div>設定的float導致了被拆分失敗。讓我們先看一下修復後的示例： 根據這個BUG特性構造的一個示例在一個單獨頁面上。
HTML 程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> </div> <div> <dl> <dt>Foo:</dt> <dd>Bar</dd> <dt>Baz:</dt> <dd>Ber</dd> </dl> </div> |
CSS程式碼：
|
1 2 3 4 5 6 7 8 9 10 |
div { float: left; position: relative; clear: left; /* not related to the bug */ } dt, dd, li { background: #f00; position: relative; } |
我們通過把表單項的position屬性設定為relative修復了這個BUG。簡單而完美！