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啊！！