伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的@nighca 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。
—————————————————————————–
影響的IE版本
這個bug影響IE8
表現
<button>及<input type=”submit”>的背景在:active狀態下會向左上偏移。
時間
2009.8.13 18:19:22
描述
儘管CSS規範宣告過：CSS2.1並沒有定義哪些屬性可以被用於表單控制元件及框架，或是怎樣通過CSS描述它們的樣式，但瀏覽器仍可能會將CSS屬性應用於之上。規範建議開發者將其視作實驗性的支援 (CSS2.1 Section 3.2 – UA Conformance) 。不過，與這個頁面（我發現該bug的地方）的作者觀點相同，我認為這確實是一個bug。我們來看演示！
演示
示例在這個頁面。
HTML程式碼:
|
1 2 3 4 5 6 7 |
<button>Click me</button> <form action="" method="GET" onsubmit="return false;"> <div> <input type="submit" value="Click me"> </div> </form> |
CSS 程式碼:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
input, button { background: url(button.png); border: 0; display: block; height: 30px; width: 81px; text-indent: -10000px; overflow: hidden; } input:hover, button:hover { background-position: 0 -30px; } |
這裡IE8試圖顯得“聰明”一點，它將:active狀態下的背景作了移動來笨拙地模擬“按鈕按下”的效果。就是說，當你點選<button>或者<input type=”submit”>時，其背景會向左上偏移一點點。
解決方案
以下是上述bug的解決方法（以型別排序）
解決方法（條件註釋法）
該方法的時間
2009.8.13 18:40:49
可修復的的版本
所有受該bug影響的版本
描述
以毒攻毒——我們特別地針對IE8下修改:active狀態的background-position來修復這個bug。我們來看下：
修復bug的演示在這
HTML程式碼:
|
1 2 3 4 5 6 7 |
<button>Click me</button> <form action="" method="GET" onsubmit="return false;"> <div> <input type="submit" value="Click me"> </div> </form> |
CSS程式碼:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
input, button { background: url(button.png); border: 0; display: block; height: 30px; width: 81px; text-indent: -10000px; overflow: hidden; } input:hover, button:hover { background-position: 0 -30px; } |
條件註釋程式碼:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style type="text/css"> input:active, button:active { background-position: 1px -29px; /* If you are using one sheet for all the IEs you can specify: -ms-background-position-x: 1px; -ms-background-position-y: -29px; instead */ } </style> |
:active狀態下的背景在每個方向上偏移了2px。與最初的:hover狀態（或正常狀態）的偏移相比，針對IE8的偏移會向右、向下多出1px，這樣，在我們的演示中background-position設定為1px -29px。
如果你跟我一樣希望為所有版本的IE使用一份樣式表（或者你想把對該bug的修復放在正常的樣式表中），只需在:active狀態下使用
|
1 |
-ms-background-position-x: 1px; -ms-background-position-y: -29px; |
副作用
這個方法的副作用是，如果使用者點選後將滑鼠移出按鈕或者雙擊按鈕，按鈕背景的移動還會被看到。因為這種情況很少發生，我覺得不必擔心它。我找到這個bug的頁面中，作者還列出了一種標記的方法，（我猜可能）不會產生這樣的副作用。不過，因為那個方法不適用於<input type=”submit”>，所以我沒有把它包含到這個頁面中。