伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的@xiaoyu 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。
—————————————————————————–
受影響版本
該bug影響：IE8
表現
這個Bug是從James Hopkins整理的網頁看到的。當滑鼠懸停在某個元素上時，有的情況下看不見border-bottom了。在設定了outline屬性後，元素 :hover 狀態時border-bottom寬度會少一個畫素（可能與outline互相抵消了）。
教程日期
2009-08-13，13:45:47， 星期四
描述
這個bug是我在James Hopkins的頁面中發現的。具體的問題是這樣子的：當父元素設定了padding屬性後（即便屬性值為0），該元素處在:hover狀態時，元素底部邊框無法顯示，當設定outline屬性後，邊框寬度的第一個畫素無法顯示（看起來就像跟底部的outline互相抵消了）。
示例
示例在一個單獨頁面上頁面。
HTML程式碼
|
1 2 |
<div id="test"><span><a href="#">Hover over this</a></span></div> <div id="test2"><a href="#">Hover over this</a></div> |
CSS程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
body { padding: 50px; } span a { text-decoration: none; font-size: 500%; outline: 1px solid #000; } #test2 a { text-decoration: none; font-size: 500%; } #test2 a:hover, span a:hover { border-bottom: 1px solid black; } |
第一個連結元素設定了outline值，當它處在:hover狀態時，在IE8中看起來底部的outline不見了。對於第二個連結元素，:hover狀態下底部邊框不見了。如果把邊框值設定大一點（比如說設定為5px），對於第二個連結，底部邊框仍然無法顯示，對於第一個連結元素，底部邊框實際值要比屬性值小1px（即4px）。（譯者注：經過測試，不只是border-bottom會有這個bug，border-top也會有邊框消失的bug。）
解決方案
以下是按照解決方案型別排序的解決方案：
解決方案（清理方案 Clean Solution）
時間
2009-8-13 14:02:07
修復版本
所有受影響版本
具體方案
這個bug的解決方案非常簡單。下面是一個已經修復過的demo:
demo可以在示例頁面檢視
HTML 程式碼:
|
1 2 |
<div id="test"><span><a href="#">Hover over this</a></span></div> <div id="test2"><a href="#">Hover over this</a></div> |
CSS Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
body { padding: 50px; } span a { text-decoration: none; font-size: 500%; outline: 1px solid #000; } #test2 a { text-decoration: none; font-size: 500%; } #test2 a:hover, span a:hover { border-bottom: 1px solid black; position: relative; } |
修復bug的絕招就是對 a:hover { }設定{position: relative;}。注意：如果對非:hover狀態設定{position: relative}（比如說這樣子: a { position: relative; }），那麼這個bug將依然存在。