CSS Bug

时间:2023-03-08 16:14:57
CSS Bug

父子标签间用margin的问题,表现在有时除IE(6/7)外的浏览器子标签margin转移到了父标签上,IE6&7下没有转移。测试代码:

<body>
<style type="text/css">
.box1{
height:150px;
background:#CCC;
}
.box1_1{
height:50px;
margin-top:50px;
background:#AAA;
}
</style>
<div class="box1">
<div class="box1_1">box1_1</div>
</div>
</body>

chrome & FireFox & IE8 & IE9下的效果为:

CSS Bug

IE6 & IE7 下的效果:

CSS Bug

应该和BFC有关,解决办法就是父子标签间的间隔建议用padding,兄弟标签间用margin。给box1加overflow:hidden;也是个不错的办法