IE CSS Bug系列：不正确的浮动伸缩Bug

影响的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 的浮动删掉了）。

在正常的浏览器里，最初的示例中浮动元素的伸缩可以完全适应其包围元素的变化，而我们的修复版本并不能做到。因而这个解决方法并不完美，不过也许可以帮助到你。