作者：段立新 陆远

标准参考

无

问题描述

在 IE6 IE7 IE8(Q)下，容器触发 hasLayout 导致其左浮动子元素 'margin-bottom' 消失。

造成的影响

此问题导致的边距消失可能影响到页面的布局，如段落过于紧凑，甚至是文字重叠。

受影响的浏览器

IE6 IE7 IE8(Q)

问题分析

分析以下代码：

<span>content_text</span> <div style="zoom:1; overflow:hidden;
                background:lightgrey;"> <div style="float:left; width:50px; height:50px; margin:20px;
                background:dimgray;"></div> </div> <span>content_text</span>

测试代码中 DIV 容器内包含一个左浮动子元素，左浮动¹元素宽度和高度均为50px，四个方向均有20px的边距。容器设置了 'zoom:1; overflow:hidden;'。

【注】：右浮动元素没有这个问题，很显然这是早期版本 IE 在布局计算中存在失误。

各浏览器表现如下：

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

可见，

• 在 IE6 IE7 IE8(Q)中，容器 DIV 的 'zoom:1' 触发了 hasLayout，其内部浮动子元素也参与到了容器的高度计算之中。但是浮动子元素设置的 'margin-bottom' 消失；
• 在其他浏览器中，容器的 'overflow:hidden' 创建了新的 Block Formatting Context ，同样，其内部浮动子元素也参与到了容器的高度计算之中。浮动子元素的四个方向的 margin 均正常。

解决方案

为容器显式地设置高度。若容器高度不定，则要避免在触发了 hasLayout 的容器内的浮动子元素上设置 'margin-bottom' 特性，可以通过为容器设置 'padding-bottom' 达到相似的效果。

只要不同时触发父元素hasLayout、子元素左浮动、左浮动子元素拥有非零的 margin-bottom 值，这三个条件中任意一项，均可解决此问题。

参见

知识库

• ...

相关问题

• ...