IE CSS Bug系列：不正确的浮动伸缩Bug-css不受浮动影响

影响的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/