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

标准参考

根据W3C CSS2.1规范第8.3节中的描述，边距属性设置了一个框的边距区的宽度。'margin' 缩写属性设置所有四边的边距，而其它的边距属性（ 'margin-top' ，'margin-right' ， 'margin-bottom' 及 'margin-left' ）只设置它们代表的那一边的边距。

边距属性的取值可以是下面值之一：

• <length> 指定一个固定的宽度。
• <percentage> 百分比的计算基于生成的框的包含块的宽度。
• auto 其表现细节请参见宽度和边距的计算一章。

边距属性允许有负值，不过可能有与实现相关的限制。 

问题描述

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

造成的影响

严重的情况下会破坏整体布局。

受影响的浏览器

IE6 IE7 IE8(Q)

问题分析

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

分析以下代码：

<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' 。