伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的 @rubyisapm 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。
—————————————————————————–
受影響的瀏覽器版本
IE7
表現
:hover狀態下背景沒有改變
教程日期
2009 8.11 19:50:22 星期二
描述
因為產生這個bug的觸發器如此不可理喻，我真不知道這個bug是怎麼被發現的。我從http://css.tests.free.fr/en/exemple46.php瞭解到這個bug，如果你也在實際的網站中踩到了這個坑，那我請你喝一杯吧！讓我們來看看這個bug：
演示
演示在一個單獨的頁面上。
HTML Code
|
1 |
<div><a href="#">Hover Me</a></div> |
CSS Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
div { background-color: #000; } a { width: 100%; display: block; border: 1px solid #000; color: #ddd; } a:hover { background-color: #fff; color: #000; } |
在IE7中，連結上發生hover時背景不會變為白色，這個bug真是太脆弱了，相比修復教程，也許我該寫個“該bug如何產生”的教程。來看看吧：非hover狀態是需要“layout”的,:hover選擇器中設定了background-color(沒有使用background或background-image樣式)。非hover狀態是需要設定邊框而不需要設定背景的。該bug只出現在:hover狀態下將background-color設定為純白色（#fff,#ffffff或white）的情況下。（特扯淡吧？）
解決方案（清潔方案）
以下是針對此bug的解決方案
解決日期
2009 8.11 20:54:32 星期二
修復版本
所有受影響的版本
描述
針對此bug有超多的解決方案，在這裡我只說一種，修復後的頁面展示在一個單獨的頁面上
HTML Code
|
1 |
<div><a href="#">Hover Me</a></div> |
CSS Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
div { background: #000; } a { width: 100%; display: block; border: 1px solid #000; color: #ddd; } a:hover { background: #fff; color: #000; } |
我只做了一件事：將background-color換成background，哦了~bug被修復了。如果這個方案對你不適用，只要看看bug是怎麼被觸發的，你就能找到很多的解決方案（例如：可以在:hover狀態下設定background為接近白色的#fffffe或者設定position:relative）