兼容性——IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常

最新推荐文章于 2023-08-02 15:38:42 发布

奋斗中的小黄鸡

最新推荐文章于 2023-08-02 15:38:42 发布

阅读量1.5k

点赞数

分类专栏：兼容性文章标签：负边距兼容性

3 篇文章 0 订阅

订阅专栏

原文请参考：http://w3help.org/zh-cn/causes/RB1001

对于此问题，我们通过以下的测试用例来说明。

分析以下代码：

<div style="width:100px; height:100px; border:1px solid red;">
    <div style="border:1px solid blue; margin:-5px;">123</div>
</div>

一个100x100像素的红色边框 DIV 元素内包含了一个没有设置宽度和高度的蓝色边框的 DIV 元素，且这个子元素四个方向各设置了-5px的 'margin' 。这段代码在不同的浏览器环境中的表现如下：

IE6 IE7(Q) IE8(Q)	IE7(S)	IE8(S) Firefox Opera Safari Chrome

在实际情况中，当给一个块级元素设置了负值的 'margin' ，如果该元素的父容器 'overflow' 为 'visible' （ 'overflow' 的默认值就是 'visible' ），这

个块级元素可能会由于负值的 'margin' 而使其父容器无法全容纳其自身，其会部分“溢出”父容器并在父容器之外被渲染。关于盒模型的详细资

料，请参考 W3C CSS2.1 规范中的内容： Box Model 。

然而根据上面的测试代码的结果可见，

在 IE6 IE7(Q) IE8(Q) 下，由于负值的 'margin' 导致子元素 DIV 超出其父容器部分，均被父元素隐藏，而其 'margin-bottom' 由于没有超出父容器则被显示出来。
在 IE7(S) 下情况比较特殊， 'margin-top' 与 'margin-right' 与 IE6 中一样，超出父容器的部分被父容器隐藏。而 'margin-bottom' 虽然并没有因为其负值而超出父容器，但浏览器却将子元素 DIV 的内部裁去了5px。而 'margin-left' 则没有因为负值的影响而被父容器隐藏，反而显示了出来。
在 IE8(S) Firefox Chrome Safari Opera 下，浏览器按照 W3C 的规范对代码进行解释，为我们预期的效果。

上面测试代码中容器由于设置了宽度及高度而触发了其 hasLayout 属性，下面看看若容器的 hasLayout 为 false，IE 对由负的 'margin' 溢出容器的子元素的处理：

<div style="border:1px solid red;">
    <div style="border:1px solid blue; margin:-5px;">123</div>
</div>

上述代码中的元素均没有触发IE中的hasLayout属性，这段代码在不同的浏览器环境中的表现如下：

IE6(Q)	IE6(S)	IE7(Q) IE8(Q)	IE7(S)	IE8(S)

在容器没有触发hasLayout属性后，出现了更加怪异的效果，且无法找到其规律。

在确保元素的容器触发 hasLayout 的前提下，为该元素同时设置 'position:relative' 和 'zoom:1'。

首先需要保证容器在IE中触发 hasLayout 属性，可以通过zoom:1实现。

在 IE7(S) 中，当使设置了负值 'margin' 的元素的 hasLayout 属性为 'true' ，即触发该元素的 hasLayout特性后，此 Bug 现象消失，例如为该元

素设置宽度或高度，或者在完全不影响该元素盒模型的情况下使用 zoom:1 来触发 hasLayout 从而消除此 Bug 。

在 IE6 IE7(Q) IE8(Q) 中，仅仅触发 hasLayout 特性并不一定能消除此 Bug ，同时还需要为该元素设置 'position:relative'，即在完全不影响该元

素盒模型的情况下使用 zoom:1 'position:relative' 。

关注