IE BUG之css:float – Falost的小窝

IE BUG之css:float

CSS3 神棍 154℃ 0评论

今天在面试的时候,面试官提的一个IE兼容的问题:IE6、7中使用CSS样式float会出现什么问题?

我第一个想到的就是浮动BUG,但是处理的方法忘记了。。。因为平常都是抛弃了IE,这下让我情何以堪,改怎么回答呢?虽然模糊的回答了下,但感觉不如意,回来特地研究了下!
css


*{ margin:0; } div { width:200px; height:200px; border:1px solid #ff0000; text-align:center; margin:10px; } .div{ float:left; } .div3{ border:solid 1px blue; }

html

    <body>
        <div class="div">div 1</div>
        <div class="div">div 2</div>
        <div class="div3">div 3</div>
    </body>

因为win10上没有IE6,使用的是IE7,
IE7效果

以上两张图可以看出,在IE7中,三个div 看起来都是被浮动了一样,展示在一排上,但是div3我们并不需要进行浮动啊,所以这里出现了BUG。

在google浏览器中,可以看见div3被div1给遮住了,因为div1和div2在浮动之后,就脱离了文档流,它本应该占的位子就没有了,div3就挤了上去,故而我们看见,div1把div3给遮住了。

解决的方法,就是给不需要浮动的同级元素清除一下浮动:


.div3{ clear:both; }

更多的float问题请看: http://www.ruanyifeng.com/blog/2009/04/float_clearing.html

转载请注明:Falost的小窝 » IE BUG之css:float

如果你觉得这篇文章不错或者对你有帮助,想请我喝一杯咖啡,可以打赏
喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址