margin系列之bug巡演(二)

2018-02-24 15:22 更新

margin系列之bug巡演(二)

原作者:doyoe
原文链接:http://blog.doyoe.com/2013/12/17/css/margin%E7%B3%BB%E5%88%97%E4%B9%8Bbug%E5%B7%A1%E6%BC%94%EF%BC%88%E4%BA%8C%EF%BC%89/

IE6/7 clear引发的margin-top bug

我知道,这是一个被谈及较少的bug,但我几乎可以肯定你在遇见过的同时并没有把它当成是一个bug。

w3c关于 clear 特性的描述

设置了 clear 为非 none 值的元素,其顶部 border 边界在垂直方向不允许出现在之前的浮动元素底部 margin 之上。

什么意思呢?用段代码来阐述:

HTML

<div class="a">float:left</div>
<div class="b">clear:left</div>

CSS

.a{
    float:left;
    height:30px;
    margin:20px;
}
.b{
    clear:left;
    height:30px;
    margin-top:-30px;
}

如上代码,你认为 .b 是否会相对自身向上偏移 30px 呢?然后盖住 .a 底部 10px?如果你真这么猜想,那就错了。

来看上述代码,我们会得到什么样的结果,如 图一

clear margin(图一)

恩,你觉得这可能会是落后浏览器才这样,比如IE6/7。很高兴的告诉你,其实高级浏览器才这样,IE6/7的表现会是之前你猜想的那样,如下 图二

clear margin(图二)

不论你相信与否,看个例子你就明白了 DEMO1clear margin 猜想,你会发现就算将 margin-top 去掉,.b 的位置也丝毫不会改变。

为什么会这样?

我们已经说过设置了 clear 为非 none 值的元素其顶部 border 边界不允许出现在之前浮动元素的底部margin边界之上。也就是说必须在垂直方向上递次堆叠却不能重合。

所以说高级浏览器是遵循w3c规范的,而IE6/7的实现明显有悖该规则。
` 虽然拥有clear特性的元素其border`
顶部边界不允许超越之前浮动元素的底部margin边界之上,但是其margin可以和之前浮动元素的任何区域重合。我们稍微改下之前代码:

HTML

<div class="a">float:left</div>
<div class="b">clear:left</div>

CSS

.a{
    float:left;
    height:30px;
    margin:20px;
}
.b{
    clear:left;
    height:30px;
    margin-top:50px;
}

我们将 .bmargin-top 修改为一个正值,能得到如下 图三

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号