伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的@ivy3372 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。
—————————————————————————–
受影響版本
該bug影響：IE7
表現
包含了後面跟有註釋的子選擇器的選擇器會被忽略
教程日期
2009-8-10 05:04:59 星期一
描述
這個bug用於描述無論是在IE6或者IE7中都不可見的規則集。IE6會忽略它是因為IE6不支援子選擇器，而IE7忽略它因為它有這個註釋bug。請看demo！
示例
由於此bug的性質，示例在一個單獨頁面上separate page。
HTML程式碼：
|
1 |
<div></div> |
CSS 程式碼：
|
1 2 3 4 5 6 7 8 9 10 |
div { width: 200px; padding: 50px; margin: 0 auto; background: #ddd; } html > /**/ body div { background: #00f; } |
在所有功能正常的瀏覽器上，這個<div>將是藍色的。在IE7裡這個規則會被忽略，因為子選擇器帶有註釋。
解決方案
以下是按照解決方案型別排序的解決方案：
解決方案（ Clean Solution）
時間
2009-8-10 05:08:40 星期一
修復版本
所有受影響版本
具體方案
我寫這個解決方案僅僅只要有一個簡單的精神（以及顯示這個bug確實是由註釋引起的），因為我懷疑任何一個明智的人會願意在選擇器中間加註釋，並在發現這樣做引起了bug以後也毫不介意地依舊放在哪裡 :) 讓我們看看我們在這裡得到了什麼：
由於這個bug的性質，修復的程式碼在單獨的頁面可獲得 separate page
HTML程式碼：
|
1 |
<div></div> |
CSS 程式碼：
|
1 2 3 4 5 6 7 8 9 10 |
div { width: 200px; padding: 50px; margin: 0 auto; background: #ddd; } html > body div { background: #00f; } |
這裡不用再多說了。 我們去掉了其中的註釋，bug也就沒有了。