浮动不能在IE中正确清除 - 如何解决?

时间:2010-04-30 16:06:11

标签: css

我现在已经敲了大约一个小时了,我把这个问题提炼成了一个我能想到的最简单的例子来说明这个问题。

CSS / HTML

<style>
  #T div { float: left; }
  ._b { clear: left; }
</style>

<div id='T'>
    <div class='_a'>*</div>
    <div class='_b'>*</div>
    <div class='_c'>*</div>
    <div class='_d'>*</div>
</div>

IE7

***
*

FF,Chrome,Opera

*
***

FF / Chrome / Opera的结果是我所期待的。没有添加更多标记来解决这个问题,我绝对不知道如何让它在IE中正常工作。

当你说,3对所有人来说都是非常丑陋,然后3意味着在同一条线上 - 额外的2结束在第一行。

我真的希望有人知道这方面的解决方法。

设置浮动div的宽度对父元素没有帮助也没有宽度,因为这是一个简单的例子。想象一下,每行可以有1-5个元素,然后就可以看到问题了。

2 个答案:

答案 0 :(得分:0)

This似乎是对IE浮动怪癖的深入评估。检查一下,也许会有所帮助;)

答案 1 :(得分:0)

.clearfix:before, .clearfix:after {content: "\0020"; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

只需将clearfix类应用于要清除的元素,此css将处理所有浏览器中的问题。我建议在Blender3D提供的链接上阅读该问题。