伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的@nighca 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。
—————————————————————————–
影響的IE版本
這個bug影響IE7
表現
對於會改變某絕對定位的子孫元素的left/top偏移值的 :hove r狀態，若該元素隱藏在可視區域之外，則該狀態不會生效；若該元素可見，其left/top偏移值不會在hover時改變。
教程編寫時間
2009.8.14 14:53:45
描述
這是我在 Gérard Talbot 收集整理的 IE7 Bug 頁面發現的bug之一。我在這個bug的標題中標明“壞了”的原因是，一開始這看起來好像是:hover被忽略了，但真正的原因是，left/top屬性值並沒有如在demo中的第二個<div>中我們可以看到的那樣發生變化。來看下：
演示
演示在一個單獨的頁面
HTML程式碼:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="container"> CAN HAS HOVERS?! <p id="hidden"> I AM HIDDEN ABSOLUTE!!! </p> </div> <div class="container"> CAN HAS HOVERS?! <p id="visible"> I AM VISIBLE ABSOLUTE!!! </p> </div> |
CSS 程式碼:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
.container { background: #ddd; border: 2px solid #000; padding: 5px; width: 500px; height: 100px; margin: 20px auto; position: relative; } #hidden, #visible { background: #0f0; position: absolute; border: 2px solid #f00; } #hidden { top: -10000px; left: 0; } #visible { left: -100px; top: 0; } .container:hover #hidden { top: 0; } .container:hover #visible { left: 0; } |
在IE7中，當滑鼠hover這些<div>時，其中的<p>不會像在正常瀏覽器中那樣移動至完全包含於其包圍<div>。這個demo這麼大是因為我把這個bug的四種情況都展示了，包括top或是left，絕對定位的元素是完全隱藏或是可見。
要觸發這個bug無須特別的條件，只需要把非hover狀態的top或left偏移設定為非百分比的的值，並在hover狀態下改變為任意非百分比的值。
解決方案
以下是上述bug的解決方法（以型別排序）
解決方法(乾淨的方法)
該方法的時間
2009.8.14 15:19:52
可修復的的版本
所有受該bug影響的版本
描述
解決這個bug的方法除了將top/left設定為百分值之外，還可以使用margin。我們先來看修復demo。
修復bug的演示在一個單獨的頁面
HTML程式碼:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="container"> CAN HAS HOVERS?! <p id="hidden"> I AM HIDDEN ABSOLUTE!!! </p> </div> <div class="container"> CAN HAS HOVERS?! <p id="visible"> I AM VISIBLE ABSOLUTE!!! </p> </div> |
CSS程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
.container { background: #ddd; border: 2px solid #000; padding: 5px; width: 500px; height: 100px; margin: 20px auto; position: relative; } #hidden, #visible { background: #0f0; position: absolute; border: 2px solid #f00; } #hidden { top: -10000px; left: 0; } #visible { left: -100px; top: 0; } .container:hover #hidden { top: 0; margin-left: 0%; /* can use any direction or set to value other than 0 */ } .container:hover #visible { left: 0; margin-left: 0%; /* can use any direction or set to value other than 0 */ } |
這裡我做的是，將margin-left設定為0%—注意這裡百分號很關鍵。即使設定為0產生的是同樣的邊距效果，但省略百分號將無法修復這個bug。或者你可以將margin在任意方向上使用任意單位設定為任意的非零值。