伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的 @nighca 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。
—————————————————————————–
影響的IE版本
這個bug影響IE6
表現
border顯示混亂，不該有的地方有了，該有的地方沒有。
教程編寫時間
2009.7.19 16:22:53
描述
這個bug會在很多不同情形下出現。
演示
因為bug的性質，演示在一個單獨的頁面
HTML Code:
|
1 2 3 4 5 6 7 8 9 |
<div id="wrapper"> <div id="one"> foo </div> <div>foo bar</div> <div id="two"> bar </div> </div> |
CSS Code:
|
1 2 3 4 5 6 7 8 9 10 |
#wrapper { border: 3px solid #000; } #one { border: 1px solid #0f0; } #two { border: 1px solid #00f; margin-top: -1px; } |
這個bug有很多不同的組合。在我們的演示中#two的負margin值觸發了這個bug——#wrapper的border從#two中漏了出來。
解決方案
以下是上述bug的解決方法（以型別排序）
解決方法 (layout方法)
該方法的時間
2009.7.19 16:40:16
可修復的的版本
所有受該bug影響的版本
描述
這是眾多佈局的bug之一。我們來看下修復好的演示：
因為bug的性質，修復的demo在一個單獨的頁面
HTML Code:
|
1 2 3 4 5 6 7 8 9 |
<div id="wrapper"> <div id="one"> foo </div> <div>foo bar</div> <div id="two"> bar </div> </div> |
CSS Code:
|
1 2 3 4 5 6 7 8 9 10 |
#wrapper { border: 3px solid #000; } #one { border: 1px solid #0f0; } #two { border: 1px solid #00f; margin-top: -1px; } |
|
1 2 3 4 5 6 7 |
<!--[if lte IE 6]> <style type="text/css"> #wrapper { zoom: 1; } </style> <![endif]--> |
我們在這裡做的是給予父節點#wrapper layout。正如我所說的，這個bug以各種不同的形式出現，要認準哪個元素需要layout。