作者：陆远

标准参考

根据 CSS2.1 规范中的描述，在表格算法中，在固定布局（table-layout:fixed）情况下可能出现单元格的内容因宽度不够溢出单元格的情况。如果单元格内容出现溢出，则根据单元格的 'overflow' 特性决定是否剪裁溢出的内容。

关于固定表格布局的详细信息，请参考 CSS2.1 规范 17.5.2.1 Fixed table layout 中的内容。

问题描述

对于溢出单元格的内容，IE6 IE7 IE8 混杂模式始终会对溢出部分进行隐藏，而不考虑单元格的 'overflow' 特性，就好像单元格始终设置了 "overflow:hidden" 一样。

造成的影响

若表格中的单元格存在内容溢出情况，则在 IE6 IE7 IE8 混杂模式中由于浏览器始终裁切溢出内容会使得布局不被破坏，但是在其他浏览器中，溢出的内容可能与其他单元格的内容发生重叠。

受影响的浏览器

IE6 IE7 IE8(Q)

问题分析

创造一个使表格中单元格内容溢出的情况。本例使用 "table-layout:fixed" 。

分析以下代码：

<table border="1" style="table-layout:fixed; width:80px;"> <tr> <td><div
                style="width: 120px; height:30px; background:#CCC;"></div></td> </tr>
                </table>

上面代码中，宽度为 80px 的表格为固定布局，其内单元格中包含了一个宽度为 120px 的 DIV 元素。

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

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

单元格元素 'overflow' 特性的默认值为 'visible'，则默认情况下当出现单元格中的内容宽度超出单元格时，浏览器应该正常地使该元素超宽部分溢出单元格。

而 IE6 IE7 IE8(Q) 中，浏览器没有考虑单元格的 'overflow' 特性，而始终裁切溢出单元格的内容，这违背了 W3C 规范。

注：在 IE6 IE7 IE8(Q) 中，如果一个 TABLE 的 'table-layout' 特性的值为 'fixed'，并且 TABLE 没有明确设定宽度，则此时并不会对 TABLE 使用自动表格布局。

解决方案

遵照 W3C 规范所描述的，为单元格元素设置 "overflow:hidden" ，在所有浏览器中均会裁切溢出单元格的内容。

参见

知识库

• ...

相关问题

• RE1008: IE6 IE7 IE8(Q) 中固定表格布局下的 TABLE 元素 'width' 特性为 'auto' 时不会将其当作自动表格布局处理