牧羊岛

懒是不会有好果子吃滴//

导航

div浮动后，里面的块元素margin-top不正常

Posted on 2010-03-25 11:21  牧羊岛  阅读(3433)  评论(1)    收藏  举报

div浮动后，里面的块元素margin-top不正常！！

这个是火狐下不正常

效果：

代码：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题文档</title>
<style>
body{margin:0; padding:0;}
.F_L{float:left;}
.ModelInfo .Title2{width:505px; height:60px; background:#00F;}
.ModelInfo .Title2 .Tab_Btn{margin-top:29px; background:#F00; height:25px;}
</style>
</head>
<body>
<div style="width:960px; background-color:#CCC; height:60px;">
    <div class="F_L ModelInfo">
      <div class="Title2">
        <div class="Tab_Btn">
        </div>
      </div>
    </div>
</div>
</body>
</html>

 

 

还在探索。。。

 

  • 解决方案

1、全部浮动

body{margin:0; padding:0;}
.ModelInfo{ float:left;}
.ModelInfo .Title2{float:left;width:505px; height:60px; background:#00F;}
.ModelInfo .Title2 .Tab_Btn{margin-top:29px; background:#F00; height:25px;}

2、做火狐hack

<!--[if !IE]-->
<style>
.ModelInfo .Title2{margin-top:-29px !important; } 
</style>
<!--[end if]-->

3、改为padding 

.ModelInfo .Title2 .Tab_Btn{padding-top:29px;}

4、overflow 

body{margin:0; padding:0;}
.ModelInfo{float:left;}
.ModelInfo .Title2{width:505px; height:60px; background:#00F; overflow:hidden;}
.ModelInfo .Title2 .Tab_Btn{margin-top:29px; background:#F00; height:25px;}

终于解决了

 

2010-04-08 今天重新看了一下这个问题：

据网上资料得出产生条件：当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用与父元素。IE8也会做同样的决定。

也就是说因为子层是父层的第一个非空子元素，所以使用margin-top会发生这个错误。

看了一下，大概还是这几种解决办法，哎一直都围着IE6的BUG转，难见FF的BUG啊！！