欢迎访问 licqi IT技术
我们一直在努力

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 的浮动删掉了)。

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

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

译文链接:http://blog.jobbole.com/47426/

赞(0) 打赏
未经允许不得转载:licqi IT技术 » IE CSS Bug系列:不正确的浮动伸缩Bug
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏