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下的效果为：

IE6 & IE7 下的效果：

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

posted @ 2015-03-15 16:05  点点乐淘淘  阅读(122)  评论(0)  编辑  收藏  举报