码迷,mamicode.com
首页 > Web开发 > 详细

CSS Bug

时间:2015-03-15 16:50:15      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:

父子标签间用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;也是个不错的办法

CSS Bug

标签:

原文地址:http://www.cnblogs.com/diantao/p/4339930.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!