Firefox下浮动布局时空白边叠加问题--HTML/WML/CSS兼容/XML--编程设计网

=波波日志 > HTML/WML/CSS兼容/XML > Firefox下浮动布局时空白边叠加问题=

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>

类别：HTML/WML/CSS兼容/XML　作者：波波　日期：2010-05-19　【评论：0】　

上一篇：防止选择,兼容ff和ie　
下一篇：添加了DOCTYPE XHTML声明时设置绝对位置对象需要加单位

暂时没有评论！

发表留言

百度赞助