伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。
這篇由伯樂線上前端開發小組的@nighca 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
影響的IE版本
這個 bug 影響 IE7、IE6
表現
跟隨在其他浮動元素之後的浮動元素，設定clear屬性時不能正確伸縮
教程編寫時間
2009.8.18 21:17:12
描述
這是我在 Gérard Talbot 收集整理的 IE7 Bug 頁面發現的bug之一（我大部分案例都是從那來的）。這個bug影響IE7跟IE6，表現就是設定了 clear 屬性的浮動元素並不能正確地伸縮。我們來看一下：
演示
示例在這個獨立頁面
HTML程式碼：
|
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 43 |
<div> Here is a <div> having float: left and clear: left. As expected, it takes, it occupies as much width it requires from the body's content area. </div> <div> This is the same type of <div>: a left-floated <div> with clear: left. This <div> should use, should take, should occupy the whole content area of the body node (expected results). However, in Internet Explorer 7, this left-floated <div> with clear: left only takes, only occupies a very narrow chunk of the body's content area (actual results). More text filling. More text filling. More text filling. More text filling. More text filling. </div> <div> Here, a third <div> having float: left and clear: left. Change your browser window viewport's width. </div> <ul> <li> Here is a <div> having float: left and clear: left. As expected, it takes, it occupies as much width it requires from the body's content area. </li> <li> This is the same type of <div>: a left-floated <div> with clear: left. This <div> should use, should take, should occupy the whole content area of the body node (expected results). However, in Internet Explorer 7, this left-floated <div> with clear: left only takes, only occupies a very narrow chunk of the body's content area (actual results). More text filling. More text filling. More text filling. More text filling. More text filling. </li> <li> Here, a third <div> having float: left and clear: left. Change your browser window viewport's width. </li> </ul> |
CSS 程式碼：
|
1 2 3 4 5 6 7 |
div, li { background-color: #ddd; border: 1px solid green; clear: left; color: black; float: left; } |
在IE6跟IE7中可以發現第二、第三個<li>及<div>不能正確地伸縮。它們被“截”短了，過早伸縮了。據Sjaak Prieste所說（Gérard Talbot在這個bug中稱讚了他），原因是這樣的，IE首先把該浮動元素與上一個浮動元素渲染在同一行中，然後發現’clear’屬性，清除浮動將其移到下一行，但沒有重新排布文字。
我的演示中既有<div>也有<li>的原因是，這兩種情況的處理方法有點區別。在“解決方案”中會有更多說明。
解決方案
以下是上述bug的解決方法（以型別排序）
解決方法（對清除進行標記）
該方法的時間
Tue Aug 18 21:17:26 2009
可修復的的版本
所有受該bug影響的版本
描述
我找不到一個像樣的辦法，如果誰有比較好的、相對簡潔的辦法，請評論給我！下面是我的方法：
修復bug的演示在這個獨立頁面
HTML Code:
|
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 43 |
<div> Here is a <div> having float: left and clear: left. As expected, it takes, it occupies as much width it requires from the body's content area. </div> <span class="ie_fix"></span> <div> This is the same type of <div>: a left-floated <div> with clear: left. This <div> should use, should take, should occupy the whole content area of the body node (expected results). However, in Internet Explorer 7, this left-floated <div> with clear: left only takes, only occupies a very narrow chunk of the body's content area (actual results). More text filling. More text filling. More text filling. More text filling. More text filling. </div> <span class="ie_fix"></span> <div> Here, a third <div> having float: left and clear: left. Change your browser window viewport's width. </div> <ul> <li> <div>Here is a <div> having float: left and clear: left. As expected, it takes, it occupies as much width it requires from the body's content area.</div> </li> <li> <div>This is the same type of <div>: a left-floated <div> with clear: left. This <div> should use, should take, should occupy the whole content area of the body node (expected results). However, in Internet Explorer 7, this left-floated <div> with clear: left only takes, only occupies a very narrow chunk of the body's content area (actual results). More text filling. More text filling. More text filling. More text filling. More text filling.</div> </li> <li> <div>Here, a third <div> having float: left and clear: left. Change your browser window viewport's width.</div> </li> </ul> |
CSS Code:
|
1 2 3 4 5 6 7 8 9 |
div { background-color: #ddd; border: 1px solid green; clear: left; color: black; float: left; } .ie_fix { display: inline-block; } .ie_fix { display: block; } |
看下這邊我做的事。在示例中的div部分，我在各div之間插入一個額外的<span>元素，並且通過 {display: inline-block;}給它一個”佈局”(layout),然後設定其display屬性為block。
因為<li>元素之間插入<span>元素不大合適，在示例的<ul>部分我將每個<li>的內容用一個<div>包起來，然後將那個div設為浮動（注意這邊將 li 的浮動刪掉了）。
在正常的瀏覽器裡，最初的示例中浮動元素的伸縮可以完全適應其包圍元素的變化，而我們的修復版本並不能做到。因而這個解決方法並不完美，不過也許可以幫助到你。