伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的@szxw 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。
—————————————————————————–
受影響版本
該BUG影響: IE7，IE6
表現
當產生overflow的子孫元素的position屬性被設定為”relative”時，無論元素的overflow屬性設定為”hidden”還是”auto”，表現的都如同被設定為”visible”一樣。
教程日期
2009-08-17 15:51:12 星期一
描述
這是我在Gérard Talbot的IE7 BUG 集合頁上發現的另外一個BUG。我沒節操地盜用了他的示例中的圖片，因為我覺得這是一個精彩的演示該BUG的方式(希望他不介意)。我要對Gérard的BUG的描述做的補充是，塊級元素也一樣會無法剪裁，而且現在用{ overflow: auto; }替換{ overflow: hidden }也會一樣出錯。讓我們看一下：
示例
示例在一個單獨頁面上。
HTM Code:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <img src="RelPosChildNotClippedByParentOverflowHidden.png" width="300" height="300" alt=""> </div> <div class="container"> <div id="block"></div> </div> |
CSS Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.container { height: 200px; width: 200px; overflow: hidden; border: 5px solid #000; } #block { width: 300px; height: 300px; background: url(RelPosChildNotClippedByParentOverflowHidden.png); } #block, img { position: relative; } |
功能健全的瀏覽器將只會顯示一個有邊框的綠色方塊。IE6和IE7瀏覽器則無法把方塊裁剪為200px200px的容器尺寸，會顯示圖片的紅色部分，而這部分是在200px200px的正方形之外的。另外，注意疊加的子孫元素覆蓋了 .container 的邊框。
解決方案
下面是按照解決方案型別排序的對上述問題的解決方案。
解決方案(最佳方案)
解決方案日期
2009-08-17 15:51:27 星期一
修復版本
所有受影響版本
描述
修復這個BUG的是相當簡單的，讓我們想看一下示例：
修復後的例項在一個單獨頁面上。
HTML Code:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <img src="RelPosChildNotClippedByParentOverflowHidden.png" width="300" height="300" alt=""> </div> <div class="container"> <div id="block"></div> </div> |
CSS Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.container { margin-bottom: 150px; height: 200px; width: 200px; overflow: hidden; border: 5px solid #000; position: relative; } #block { width: 300px; height: 300px; background: url(RelPosChildNotClippedByParentOverflowHidden.png); } #block, img { position: relative; } |
我們的標記語言沒有變化。我唯一增加的內容是，對父元素—.container <div>新增了{ position: relative; }。這樣在IE6和IE7下也表現正常了。享受它吧！