RE8015: IE 中 TABLE 等表格类元素的 'display' 特性的值被设置为 'table'、'inline-table' 之外的其他合法值后其 TABLE 特性不受影响

标准参考•
问题描述•
造成的影响•
受影响的浏览器•
问题分析•
解决方案•
参见

作者：陆远

标准参考

根据 CSS2.1 规范中的描述，CSS 中的表格模型基于 HTML4 的表格模型，包括了表格，标题，行，行组，列，列组以及单元格。下列 'display' 特性的值可以将表格语义指派给一个任意的元素：

'display' 特性的值	对应 HTML 中的元素
table	TABLE (block-level)
inline-table	TABLE (inline-level)
table-row	TR
table-row-group	TBODY
table-header-group	THEAD
table-footer-group	TFOOT
table-column	COL
table-column-group	COLGROUP
table-cell	TD, TH
table-caption	CAPTION

附录中的 HTML4 缺省样式表说明了这些值在 HTML4 中的应用：

table { display: table } tr { display: table-row } thead { display: table-header-group } tbody {
                display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup
                { display: table-column-group } td, th { display: table-cell } caption { display: table-caption }

用户端对于 HTML 表格元素可能忽略这些 'display' 特性值，因为 HTML 表格可能出于向后兼容而使用其他有意图的算法。然而这并不代表不可以在其他非表格的 HTML 元素上使用 'display:table'。

关于 CSS 表格模型特性的更多信息，请参考 CSS2.1 规范 17.2 The CSS table model 中的内容。

问题描述

在 IE 中，为 TABLE 及 TD 等表格类元素设定 CSS2.1 规范附录中 "HTML4 缺省样式表" 之外¹的 'display' 特性值并不会影响其元素的原生特性及表现形式。
而其他浏览器中，这些设定的 'display' 特性则会覆盖该表格类元素的原生特性。

注 1: 对于 TABLE 元素还包括 'display:inline-table'。

造成的影响

此问题可能导致为表格类元素设定了某些 'display' 特性值后在非 IE 浏览器中表格类元素的原生特性改变，从而影响到布局。

受影响的浏览器

IE6 IE7 IE8

问题分析

由于 HTML 表格类元素众多，CSS2.1 中 'display' 特性的属性值也众多，本文将挑选常用的表格类元素以及 'display' 特性值进行重点分析。

分析以下代码：table_display.html

<!DOCTYPE html> <html> <head> <style> * { font:18px/1.2 'Trebuchet MS'; }
                </style> </head> <body> <table style="width:240px; border:5px solid
                black;"> <tr> <td style="background:wheat;">native</td> <td
                style="background:lightskyblue;">native</td> </tr> </table> <br />
                <table style="width:240px; border:5px solid black; display:block;"> <tr> <td
                style="background:wheat;">block TABLE</td> <td
                style="background:lightskyblue;">block TABLE</td> </tr> </table> <br
                /> <table style="width:240px; border:5px solid black;"> <tr style="display:block;"> <td style="background:wheat;">block
                TR</td> <td style="background:lightskyblue;">block TR</td> </tr>
                </table> <br /> <table style="width:240px; border:5px solid black;">
                <tr> <td style="background:wheat; display:block;">block
                TD</td> <td style="background:lightskyblue; display:block;">block TD</td> </tr> </table> </body>
                </html>

上述代码包含 4 组结构一样的 TABLE-TR-TD 元素，第一组没有单独为表格类元素设定任何其他 'display' 特性的值，为原生渲染；后面三组分别将 TABLE、TR、TD 元素的 'display' 特性值设定为 'block'。

这段代码在不同浏览器中运行结果如下：

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

可见：

IE6 IE7 IE8² 中，为 TABLE、TR、TD 元素设定的 'display:block' 没有对这些元素的原生特性造成任何影响；
Chrome(Q) Safari(Q) 中，为 TABLE、TD 元素设定的 'display:block' 没有对这些元素的原生特性造成任何影响；
其他浏览器 中，为 TABLE、TR、TD 元素设定的 'display:block' 改变了其原生的特性，导致表格的布局相比第一组出现了很大变化。

而 CSS2.1 规范中仅提到用户端对于 HTML 表格元素可能忽略这些 'display' 特性值，并没有明确地说对于表格类元素，其默认 'display' 特性是否可以被其他值替代从而改变其原生特性。此时恰恰在不同浏览器中出现了差异。

注 1: Firefox、Opera 中 TABLE 元素默认样式中分别有的 '-moz-box-sizing' 与 'box-sizing' 特性，其值均为 'border-box'，本文忽略这个差异。
注 2: IE6 IE7 IE8(Q) 不支持 'display:table' 等表格类的值。

解决方案

避免改变表格类元素的默认 'display' 特性。若需要隐藏某个表格类元素，即设定其 'display' 特性为 'none'，之后需要恢复其的可视状态，可以为其设定一个非法的 'display' 特性的值，如：TR.style.display = "";

参见

知识库

测试环境

操作系统版本:	Windows 7 Ultimate build 7600
浏览器版本:	IE6 IE7 IE8 Firefox 3.6.10 Chrome 8.0.552.0 dev Safari 5.0.2 Opera 10.63
测试页面:	table_display.html
本文更新时间:	2010-10-14