Firefox下浮动布局时空白边叠加问题

　　在Firefox下，如果采用div+css浮动控制页面布局时，如果一个div设置了margin-top，并且使用clear：both清除浮动时，margin-top并未显示出来，而是和处于其上面的浮动div叠加在一起了。源代码如下所示，结果如图1所示

-HTML

<style type="text/css">
.outerDiv{padding:4px;border:solid 2px black;}
.innerDiv{border:solid 2px #ff7f27;height:50px;}
</style> 
<div class="outerDiv" style="width:300px;height:334px;float:left;margin-right:50px;"><div class="innerDiv"></div></div>

<div class="outerDiv" style="width:180px;height:290px;float:left;margin-right:50px;"><div class="innerDiv"></div></div>

<div class="outerDiv" style="width:800px;height:100px;margin-top:50px;clear:both;"><div class="innerDiv"></div></div>

图1 Firefox清除浮动时导致的空白边叠加

　　但是在IE6下不会出现此问题。

图2 IE下清除浮动时空白边未叠加

　　要解决空白边叠加的问题，需要多加一个清除浮动的标记，更改过后代码如下，这样就不会出现空白边叠加了

-HTML

<style type="text/css">
.outerDiv{padding:4px;border:solid 2px black;}
.innerDiv{border:solid 2px #ff7f27;height:50px;}
</style> 
<div class="outerDiv" style="width:300px;height:334px;float:left;margin-right:50px;"><div class="innerDiv"></div></div>

<div class="outerDiv" style="width:180px;height:290px;float:left;margin-right:50px;"><div class="innerDiv"></div></div>
<div style="clear:both"></div><!--清除浮动，要不下面的这个div在Firefox下会导致空白边叠加而不显示-->
<div class="outerDiv" style="width:800px;height:100px;margin-top:50px;"><div class="innerDiv"></div></div>

加支付宝好友偷能量挖...

原创文章，转载请注明出处：Firefox下浮动布局时空白边叠加问题

2010-5-19评论(0)Web开发网

阅读(138)喜欢(0)分类：HTML/CSS兼容/XML