影響的IE版本

這個 bug 影響 IE7、IE6

表現

跟隨在其他浮動元素之后的浮動元素，設置clear屬性時不能正確伸縮

教程編寫時間

2009.8.18 21:17:12

描述

這是我在 Gérard Talbot 收集整理的 IE7 Bug 頁面發現的bug之一（我大部分案例都是從那來的）。這個bug影響IE7跟IE6，表現就是設置了 clear 屬性的浮動元素并不能正確地伸縮。我們來看一下：

演示

示例在這個獨立頁面

HTML代碼：

<div> 
    Here is a &lt;div&gt; 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 &lt;div&gt;: a left-floated &lt;div&gt; with 
    clear: left. This &lt;div&gt; should use, should take, should occupy 
    the whole content area of the body node (expected results). However, in 
    Internet Explorer 7, this left-floated &lt;div&gt; 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 &lt;div&gt; having float: left and clear: left. Change 
    your browser window viewport's width. 
</div> 
  
<ul> 
    <li> 
    Here is a &lt;div&gt; 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 &lt;div&gt;: a left-floated &lt;div&gt; with 
        clear: left. This &lt;div&gt; should use, should take, should occupy 
        the whole content area of the body node (expected results). However, in 
        Internet Explorer 7, this left-floated &lt;div&gt; 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 &lt;div&gt; having float: left and clear: left. Change 
        your browser window viewport's width. 
    </li> 
</ul> 

CSS 代碼：

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：

<div> 
    Here is a &lt;div&gt; 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 &lt;div&gt;: a left-floated &lt;div&gt; with 
    clear: left. This &lt;div&gt; should use, should take, should occupy 
    the whole content area of the body node (expected results). However, in 
    Internet Explorer 7, this left-floated &lt;div&gt; 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 &lt;div&gt; having float: left and clear: left. Change 
    your browser window viewport's width. 
</div> 
  
<ul> 
    <li> 
        <div>Here is a &lt;div&gt; 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 &lt;div&gt;: a left-floated &lt;div&gt; with 
        clear: left. This &lt;div&gt; should use, should take, should occupy 
        the whole content area of the body node (expected results). However, in 
        Internet Explorer 7, this left-floated &lt;div&gt; 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 &lt;div&gt; having float: left and clear: left. Change 
        your browser window viewport's width.</div> 
    </li> 
</ul> 

CSS Code：

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 的浮動刪掉了）。

在正常的瀏覽器里，最初的示例中浮動元素的伸縮可以完全適應其包圍元素的變化，而我們的修復版本并不能做到。因而這個解決方法并不完美，不過也許可以幫助到你。

原文鏈接：http://haslayout.net/css/Incorrect-Float-Shrink-Wrap-Bug

譯文鏈接：http://blog.jobbole.com/47426/