打印

RE1012: IE6 IE7 IE8(Q) Firefox(Q) Opera(Q) 中在分离边框模型中空单元格的边框某些情况下会消失

作者:陆远

标准参考

无。

问题描述

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 元素是一个空单元格,第二行的包含 "&nbsp;"。TD 元素设置了边框。

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

IE6(Q) IE7(Q) IE8(Q) IE6(S) IE7(S) Firefox(Q) Opera(Q) IE8(S) Firefox(S) Opera(S) Chrome Safari
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 的 hasLayout1 特性,代码片段如下:

<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)
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
IE8(S)

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

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

解决方案

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

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6
Chrome 4.0.302.3 dev
Safari 4.0.4
Opera 10.51
测试页面: emptycell_border.html
本文更新时间: 2010-07-16

关键字

TABLE cell border 消失 边框 表格 单元格 空 empty cell