作者：陆远

标准参考

无。

问题描述

IE6 IE7 IE8(Q) Firefox(Q) Opera(Q) 中空单元格的边框某些情况下会消失。

造成的影响

IE6 IE7 IE8(Q) Firefox(Q) Opera(Q) 中的这种现象可能导致表格中空单元格的边框甚至是其所占空间，而与其他浏览器出现差异。

受影响的浏览器

IE6 IE7 IE8(Q) Firefox(Q) Opera(Q)

问题分析

TABLE 元素 'border-collapse' 特性的默认值为 'separate'，即表格为分离边框模型，本文的分析也是基于这个模型。

分析以下代码：

<style> table { border:5px solid #555; } td { border:5px solid #999; background:#CCC; }
                </style> <table class="tb" cellpadding="0" cellspacing="5">
                <tr> <td></td> </tr> <tr>
                <td>&nbsp;</td> </tr> </table>

上面代码中，创建了一个 TABLE 元素，包含两行一列，其中第一行中的 TD 元素是一个空单元格，第二行的包含 " "。TD 元素设置了边框。

在各浏览器中的运行效果如下：

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

第一行中的 TD 元素为空单元格，内容宽度和高度均为 0，由于每个方向设置了 5px 的边框，所以其实际高度为 10px。可以看到，

• 在 IE6(Q) IE7(Q) IE8(Q) 中，空单元格（empty cell）的边框会消失，但是其所占据的空间仍然存在，高度仍然为 10px；
• 在 IE6(S) IE7(S) 中，空单元格的边框消失，但是其所占据的空间发生了变化，高度变为了 1px；
• 在 Firefox(Q) Opera(Q) 中，空单元格的边框消失，其所占空间也没有变化，但是与 IE(Q) 中不同的是，原 border 应该占据的空间渲染上了 TD 元素设置的背景；
• 在 IE8(S) Firefox(S) Opera(S) Chrome Safari 中，空单元格的边框正常显示，符合 W3C 规范。

下面我们来分析 IE6 IE7 IE8 中，空单元格边框和占据空间变化的问题。

如果将空 TD 部分的代码稍作修改，在 TD 内加入其他空元素如 DIV 元素使 TD 本身不为空节点，但是这个在 TD 内的元素不触发 IE 的 hasLayout¹ 特性，代码片段如下：

<td><div></div></td>

【注】：hasLayout 特性是 IE 渲染引擎特有的概念，某些 HTML 元素本身即存在这个特性（如 BODY 元素），另外不天生具备此特性的元素则可以由某些 CSS 样式设置触发该特性。在 IE6 IE7 中 hasLayout 特性会带来很多与规范描述不符的 IE 特有 BUG。关于 hasLayout 特性更详细的描述可以参考 MSDN 中 "HasLayout" Overview 一节。

观看 IE6 IE7 IE8 实际运行效果：

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

实际结果表面，TD 内加入其没有触发 hasLayout 的空元素后，IE6 IE7 IE8 浏览器渲染效果上一测试结果相同中空 TD 表现相同。

再将代码稍许修改，为 TD 内的 DIV 元素触发 hasLayout 特性：

<td><div
                style="width:100%"></div></td>

观看 IE6 IE7 IE8 实际运行效果：

IE6 IE7 IE8

此时，IE6 IE7 IE8 在两种文档模式下均显示正常。

通过这个现象我们可以推断出，IE6 IE7 IE8 浏览器中只有 TD 元素内存在文本内容，或者 TD 元素内存在触发了 hasLayout 特性的空元素才会正常渲染 TD 宽高、背景、边框内容。

解决方案

如果需要为单元格加入背景、边框或者需要使用他的高度占位时，应避免出现空单元格，请在 TD 标记内使用 " " 创建一个空格字符内容，以便强迫 TD 元素正常渲染。

参见

知识库

• ...

相关问题

• ...