作者：陆远

标准参考

W3C CSS2.1规范第17.4节 详细描述了表格的可视化模型，此处的表格为CSS意义上的 '表格 '，它可以表现为一个块级元素（'display:table'）或是一个行内元素（'display:inline-table'）。

无论上述的哪种情况，表格框（table box）生成了一个匿名框（anonymous box），此匿名框包含了表格框本身以及所有的标题框（caption box，在文档顺序中）。标题框为块级框，包含了其 'content' 、 'padding' 、 'margin' 以及 'border' 区域，并且作为普通的块在匿名框中被渲染。标题框与表格框放置的位置关系由 'caption-side' 特性决定。

匿名框是块级还是行内的框由表格的 'display' 特性决定，匿名框创建了新的 block formatting context （具体参见：不能在 IE6 、IE7 及 IE8(Q) 中触发 hasLayout 并在其他浏览器中创建 Block Formatting Context 的元素的表现会有差异 ）。表格框（不是匿名框）为 'inline-table' 时将用来做垂直方向的基线对齐。匿名框的宽度为其内表格框的边框边宽度，其百分比宽度及高度则参照匿名框的包含块，而不是匿名框自身。

表格框上 'position' 、 'float' 、 'margin-*' 、 'top' 、 'right' 、 'bottom' 、 'left' 特性的计算后的值会作用于匿名框上，而表格框则使用上述特性的初始值。

下图展示了包含了标题框的表格，标题的上边距会与表格的上边距发生塌陷：

问题描述

Firefox 中 'display:table '的元素的外边距不会与包含块的外边距折叠

造成的影响

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

受影响的浏览器

Firefox

问题分析

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

分析以下代码：

<div style="background:gold;">Top line</div> <div style="background:gray;
                width:300px; margin:20px 0;"> <table cellpadding="0"
                cellspacing="0" style="background:pink; width:200px; margin:10px
                0;"> <tr> <td>TD</td> </tr> </table> </div> <div
                style="background:gold;">Bottom line</div>

上述代码中，两个金色背景的DIV元素之间夹有一个DIV容器，容器有上下边距margin:20px 0，其子元素TABLE有上下边距margin:10px 0。

在各浏览器中效果如下：

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

• 在IE6 IE7 IE8(Q) Firefox 中， TABLE 元素的上下 'margin' 没有与其容器的上下 'margin' 发生 "margin collapse" ，而IE中是由于TABLE元素的 'hasLayout' 属性为 'true' ，在IE中 'hasLayout' 阻止了"margin collapse"；
• IE8(S) Chrome Safari Opera 中，TABLE 元素的上下 'margin' 与其容器的上下 'margin' 发生了"margin collapse"，是符合标准正确的表现。

表格元素相对于其他块级元素存在一个特殊的“匿名框”，为表格元素设置的 'margin' 特性实际上作用于匿名框，而 Firefox 中，匿名框上的 'margin' 特性没有与其父容器的 'margin' 特性发生 "margin collapse" 。

以上测试结果对与 'display:inline-table' 时也有效。

解决方案

由于 IE6 IE7 IE8(Q) Firefox 元素的 'margin' 处理与 W3C 规范中的差异，若我们需要利用 "margin collapse" 达到某些布局效果时，在这几种浏览器中可能会由于没有发生 "margin collapse" 而出现 "额外边距" 的情况。所以应避免为表格设置上下边距，以及导致其 "margin collapse" 的发生，可以使用为表格的父元素使用 'padding' 代替表格元素的 'margin' 。

参见

知识库

• ...

相关问题

• ...