打印

HE8002: Firefox 在 TABLE 元素的宽度属性 (Attribute) 值大于 100% 时会以 100% 计算

作者:武利剑

标准参考

根据 HTML 4.01 规范中对 TABLE 元素 'width' 属性的描述,这个属性可以指定整个 TABLE 元素想要的宽度。

当它是百分比值时,这个值跟可用水平空间(包含它的元素的宽度)有关系。

标准中并没有明确规定这个百分比值大于 100% 时怎么处理。

关于 TABLE 元素的 'width' 属性 (attribute) 的详细信息,请参考 HTML 4.01 规范 11.2.1 The TABLE element 中的内容。

问题描述

Firefox 中,TABLE 元素 'width' 属性的百分比值大于 100% 时,Firefox 会按 100% 处理;如果是 CSS 的 'width' 特性,则不会这么处理。

造成的影响

该问题将导致 TABLE 的实际尺寸在 Firefox 中与其他浏览器不同。

受影响的浏览器

Firefox  

问题分析

Firefox 中,TABLE 元素的 'width' 属性的百分比值大于 100% 时会按 100% 计算。

分析以下代码:

<div style="width:100px;">
  <table id="TABLE1" width="200%" style="background-color:blue;">
    <tr><td>&nbsp;</td></tr>
  </table>
  <table id="TABLE2" style="background-color:red; width:200%;">
    <tr><td>&nbsp;</td></tr>
  </table>
</div>
  • 两个 TABLE 元素的包含块的 width 值为 100px。
  • TABLE1 的 'width' 属性(HTML attribute) 为 200%。
  • TABLE2 的 'width' 特性(CSS property) 为 200%。

根据规范可知,TABLE1TABLE2 的最终宽度都应该是 200px。

这段代码在不同的浏览器环境中的表现:

Firefox 其他浏览器
snapshot snapshot

解决方案

给 TABLE 元素设置宽度的时候,不要使用 HTML 属性 'width',请使用 CSS 特性 'width'。

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6.8
Chrome 6.0.472.14 dev
Safari 5.0.1
Opera 10.60
测试页面: table_width_attribute.html
本文更新时间: 2010-08-02

关键字

width attribute percentage