伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的 @nighca 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。
—————————————————————————–
影響的IE版本
這個 bug影響 IE7、IE6
表現
擁有layout的元素消除了浮動，而不是去環繞浮動元素
教程編寫時間
2009.8.17 14:47:09
描述
這個bug我是在Gé rard Talbot’s IE7 Bug Collection Page看到的。儘管我知道這個bug其實是被利用來消除浮動的，我依然決定把Gé rard Talbot的demo連同一個可能不是很靠譜的解決方法釋出出來，這個方法可能會幫助到一些人解決這個問題。我們來看一下：
演示
演示在一個單獨的頁面
HTML Code:
|
1 2 3 4 5 6 7 8 |
<p id="floated"> This is a left floated block. </p> <p id="text"> This text should flow around the floated block, on its right side and below. This text should flow around the floated block, on its right side and below. </p> |
CSS Code:
|
1 2 3 4 5 6 7 8 9 |
#floated { float: left; width: 6em; margin: 1em; } #text { width: 14em; } |
在正常的瀏覽器中#floated這個 <p>會出現在 #text這個 <p>內部——它就應該這樣。而在 IE6、 IE7中，因為 #text擁有了 layout（從 width來的）， #text會“畏懼”地逃開到 #floated的邊上，就好像是我們給 #text新增了 overflow:hidden或是 overflow:auto。
解決方案
以下是上述bug的解決方法（以型別排序）
解決方法 (乾淨的標記方法)
該方法的時間
2009.8.17 14:58:01
可修復的的版本
所有受該bug影響的版本
描述
這個解決方法牽涉到移除#text的 layout。我們來看下 demo中是怎麼做到的。
修復的demo在一個單獨的頁面
HTML Code:
|
1 2 3 4 5 6 7 8 9 10 |
<div id="container"> <p id="floated"> This is a left floated block. </p> <p id="text"> This text should flow around the floated block, on its right side and below. This text should flow around the floated block, on its right side and below. </p> </div> |
CSS Code:
|
1 2 3 4 5 6 7 8 9 |
#floated { float: left; width: 6em; margin: 1em; } #container { width: 14em; } |
我所做的是在#text、 #floated的外部新增了一個額外的元素——#container這個 <div>，然後將 width屬性從 #text移到 #container上，這樣渲染出的結果與一開始的 demo一致。
我承認，這與其說是一個解決方法，不如說是某個示例。既然bug是由 layout引起的，那麼解決之道在於擺脫它，而達到這一目的的方法肯定多種多樣。
最後，我想補充下，移除元素的layout的行為可能會導致你遇上“消失的內容的 bug”；既然不能通過給予元素 layout修復這個 bug，你可以試下新增{ position: relative; }代替。如果失敗了，你可能需要重新思考一下你的方法。