Firefox 4 和表格布局：已修复答案

【问题标题】：Firefox 4 and table-layout: fixedFirefox 4 和表格布局：已修复
【发布时间】：2011-08-07 22:22:42
【问题描述】：

我有一个问题，似乎是在 Firefox 3 和 4 之间引入的。本质上它与 table-layout: fixed 有关。

我有一个使用两个 DIV 的可滚动表格，一个用于标题，一个用于正文（遗憾的是，这是唯一对我有用的选项）。

body 表看起来像这样（注意这都是用 JavaScript 生成的，它是 GWT 应用程序的一部分）：

<table style="table-layout: fixed;">
    <colgroup>
        <col width="61" />
        <col width="57" />
    </colgroup>
    <tbody>
        <!-- data -->
    </tbody>
</table>

（顺便说一下，页面被声明为 HTML 4.01 Transitional）

似乎在 Firefox 3 中，列宽得到了尊重。然而，在 Firefox 4 中，它似乎有时会忽略列宽（很难准确确定，但通常当表格开始变得足够小以至于 Firefox 难以调整大小时）。如果我检查 Firefox 中的列宽，它们通常与 HTML 中指定的宽度几乎没有关系。

我只是想知道是否有人可以解释为什么会发生这种情况？

【问题讨论】：

我没有看到任何明显的错误，但是仅使用此代码片段很难进行测试，特别是如果您的应用程序正在动态生成它。你有没有机会给我们足够的代码来重现错误？然后我可以尝试修复它。
注意：COL 元素的宽度属性是deprecated in HTML5——这可能是 FF4（相对于 FF3）不喜欢它的原因...
可能表格单元格的内容比定义的宽度宽？
您使用的代码是否无法生成值为“width:61px;”而不是宽度属性的样式属性？
在固定布局表的情况下，似乎 FF 对 cols 和 colgroups 的作用做了一个例外：bugzilla.mozilla.org/show_bug.cgi?id=666493（这个 stackoverflow 问题在错误报告中被引用！）

标签： html css firefox html-table tablelayout

【解决方案1】：

首先要确保您的标记有效。您使用“/>”样式的 SHORTTAG，这在 HTML 4.01 中无效（这些闭包仅在 XHTML 中有效）。

我不知道意外的短标签是否会强制浏览器进入“Quirks Mode”（检查页面信息......有吗？）？怪癖模式是故障排除的死穴。

如果您的 FireFox 安装了 Web Developer 扩展程序，我会检查表格及其内部的所有内容......这可能是有什么东西正在推动列的墙壁。

我无法进一步猜测这个问题......没有足够的数据。如果您从浏览器中保存完整的 HTML（然后仔细去除不必要或机密的部分），然后验证问题在更简单的用例中仍然存在，这将很有帮助。如果是这样，请将该用例发布到网络上的某个地方，人们可以对其进行检查。

除了短标签，你没有透露你做错了什么。但正如我所建议的那样，表体内可能发生了一些事情......

【讨论】：

【解决方案2】：

你为什么不用这个：

display:table;
posiiton:fixed;

对于 col-tag 使用 CSS：

<col style="width:61px;" />
<col style="width:57px;" />

【讨论】：

【解决方案3】：

FF 4中的数字后面可能需要px。测试一下：

    <col width="61px" />
    <col width="57px" />

【讨论】：

遗憾的是这似乎无法解决问题:(