公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

margin-top的留白bug解决方法

可能写页面的时候发现过这样的一个问题,就是margin-top的上方留白bug ;

初始代码如下:

HTML代码:

<div class="logo"></div>
<div class="login_text">
    <div class="helloweb"></div>
</div>

CSS代码:

.helloweb {
    height:20px;
    width:225px;
    background:#FFCCCC;
    color:#F00;
    font-size:12px;
    border:#ff000 solid 1px;
    
    margin-top:10px;  /* 注意这句就是出现bug的地方 */
}

结果发现IE6.IE7正常,ie8,FF显示错误

马上去以margin-top的bug 为关键字百度,结果发现这个BUG是存在的

症结:当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用于父元素。

解决方案:

1、使用浮动来解决,即 将子层代码改为:

.helloweb {
    height:20px;
    width:225px;
    background-color:#FFCCCC;
    color:#F00;
    font-size:12px;
    border:#FF0000 solid 1px;
    margin-left:90px;
    display:inline;
    
    /* 以下代码修正FF和ie8的margin-top bug */
    margin-top:10px;
    float:left;
}

2、使用padding-top来解决(因为FF盒模型问题,不推荐使用)

OK,一切都好了~


    关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)