伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的@nighca 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。
—————————————————————————–
影響的IE版本
這個bug影響IE8
表現
包含:focus且其後跟隨另一個簡單選擇器的選擇器所對應的CSS規則會被忽略
教程編寫時間
2009.8.13 15:26:51
描述
這個bug在你使用一個帶:focus的選擇器，且其後接了另一個簡單選擇器（這倆可能是由某個連線符連線，如子元素選擇器）的時候出現。結果是這樣的選擇器對應的的規則會被忽略掉。我們來看一下：
演示
由於bug的性質，演示在一個單獨的頁面
HTML程式碼:
|
1 2 |
<button>Click me so I'd get focus!</button> <p>Test 2</p> |
CSS 程式碼:
|
1 2 3 4 |
:focus + p { font-weight: bold; font-size: 200%; } |
在正常的瀏覽器中，通過點選使button獲得焦點將導致 <p> 元素 的文字變粗變大。IE8中 則不會——這個規則集被忽略了。
解決方案
以下是上述bug的解決方法（以型別排序）
解決方法 (簡潔方法)
該方法的時間
2009.8.13 15:31:20
可修復的的版本
所有受該bug影響的版本
描述
這個解決方法乾淨徹底，這裡是修復bug的演示：
由於bug的性質，修復bug的演示在一個單獨的頁面
HTML 程式碼:
|
1 2 |
<button>Click me so I'd get focus!</button> <p>Test 2</p> |
CSS 程式碼:
|
1 2 3 4 5 |
:focus + p { font-weight: bold; font-size: 200%; } :focus {} |
我們通過新增一個額外的，使用:focus選擇器的規則集來實現恢復“常態”。實際的規則集可以為空，不影響這個bug的修復。