打印

RX1002: IE6 IE7 IE8(Q) 中从单元格溢出的内容会被自动剪裁

作者:陆远

标准参考

根据 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
IE6/7, 8(Q) table cell overflow other browser table cell overflow

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

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

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

解决方案

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

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6.3
Chrome 5.0.375.9 dev
Safari 4.0.5
Opera 10.51
测试页面: table_cell_overflow.html
本文更新时间: 2010-08-10

关键字

TABLE cell overflow hidden 溢出 单元格 表格