【分享】Firefox 中 TABLE 元素百分比宽度属性的问题
前日，在页面中显示表格。因内容太多，所以，使用了大于 ‘100%’ 的百分比宽度。在其他浏览器中好好的，但是在Firefox中，最终宽度却始终不对。
看如下代码：

HTML code

<table id="TABLE1" width="200%" style="background-color:yellow;">
    <tr>
      <td>hi1</td>
    </tr>
</table>
<table id="TABLE2" style="background-color:green; width:200%;" >
    <tr>
     <td>hi2</td>
    </tr>
 </table>

上面的代码中，TABLE1 元素的宽度属性为 ‘200%’，TABLE2 样式中宽度特性为 ‘200%’。
在不同浏览器中打开此页面，会发现，所有浏览器中 TABLE2 的宽度都是浏览器可见窗口宽度的二倍，而对于 TABLE1，只有 Firefox 中的宽度跟可见窗口等宽，也就是说 ‘200%’ 的宽度，被当作了 ‘100%’。

这是为什么呢？是 Firefox 错了，还是其他浏览器错了呢？怎么解决这个问题呢？
查标准。
根据 HTML401 中对 TABLE 元素 width 属性的描述，这个属性可以指定整个TABLE元素想要的宽度。当它是百分比值时，这个值跟可用水平空间(包含它的元素的宽度)有关系。
标准中并没有明确规定这个百分比值大于 "100%" 时怎么处理。
见：
W3C school： http://www.w3schools.com/tags/att_table_width.asp
W3C HTML4规范: http://www.w3.org/TR/html401/struct/tables.html#adef-width-TABLE

上面那个例子，把浏览器拉的好长，也不够直观。而且，通过标准的说法，那个值跟包含 TABLE 的元素有关系，那，会不会是包含 TABLE 的元素在Firefox中与其他浏览器中不同造成的呢？给以上的测试代码外面，加一个包含块（见：【分享】说说标准 --CSS中非常重要的可视化格式模型(visual formatting model)简介 中包含块的概念），再次测试。
修改后的代码如下：

HTML code

<div style="border:1px solid red; width:100px;">
    <table id="TABLE1" width="200%" style="background-color:yellow;">
       <tr>
           <td>hi1</td>
       </tr>
    </table>
    <table id="TABLE2" style="background-color:green; width:200%;">
       <tr>
           <td>hi2</td>
       </tr>
    </table>
</div>

经测试，width属性还是有问题。 TABLE1在Firefox里的最终宽度是 "100px"，而在其他浏览器中是 "200px"。

看来是Firefox的问题。在Firefox中，table元素宽度属性百分比大于100%时，Firefox会按100%处理；如果是style中的CSS特性，则不会这么处理。
如果想要避免此问题出现，在控制TABLE 元素宽度的时候，少用TABLE 标签的 “width” 属性为妙，直接使用其CSS 特性 ”width”。

不知道，还有没有别的元素有这个问题呢？

更多兼容性问题：【分享】浏览器兼容性问题目录

------解决方案--------------------
楼主只说了现象没有说本质啊。
到底 FF 中 HTML width 属性值是否被转换成了 CSS 的 width 属性值呢？
------解决方案--------------------

探讨

这是为什么呢？是 Firefox 错了，还是其他浏览器错了呢？