chrome vs FF/IE/Opera 计算表格单元格宽度？（表格布局：固定）答案

【问题标题】：chrome vs FF/IE/Opera in calculating table cell width ? (table-layout:fixed)chrome vs FF/IE/Opera 计算表格单元格宽度？（表格布局：固定）
【发布时间】：2011-04-06 01:03:00
【问题描述】：

我现在已经搜索了将近半天...但我找不到为什么 chrome6/7 似乎是与 IE8/FF3.6/Opera 相比唯一不添加填充的浏览器表格单元格的指定宽度。

当然，如果您使用的是 table-layout:fixed，这将变得至关重要，因为突然之间他们必须注意指定的 px 宽度。

好的，最后我的问题： 有谁知道为什么 Chrome 的计算方式不同，哪个浏览器是正确的（符合标准），希望有一个优雅的解决方案吗？

目前，我唯一的解决方案是带有 chrome.css 的条件注释，我在其中手动将填充添加到宽度...颤抖...

（顺便说一句：任何想告诉 px 宽度不适合 web 开发的人......请随意离开此页面）

补充：（关于回复）
首先感谢您的即时回复...我试图使其尽可能短，因此我将事实减少到最低限度...但是，正如您所提到的，网络开发中有很多变量所以我试图澄清......

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd">
<html>
<head>
    <style type="text/css">
        div { width:300px; }
        table { table-layout:fixed; width:100%; height:50px; }
        td.col1 { width:20px; background-color:blue; }
        td.col2 { width:40px; background-color:red; }
        td.col3 { width:60px; background-color:yellow; }
        td.col3 { width:auto; background-color:yellow; } 

        td { padding:5px; }
    </style>
</head>
<body>
    <div>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td class="col1"></td>
                <td class="col2"></td>
                <td class="col3"></td>
                <td class="col4"></td>
            </tr>
        </table>
    </div>
</body>

现在如果你切换 css 行

td { padding:5px; }

在不同的浏览器中，您会看到 chrome 在宽度内包含填充，而其他浏览器添加它

希望这有助于澄清并提前感谢
伯尼

【问题讨论】：

您能否发布一个简短的示例来演示您遇到的问题？
您是否提供了有效的文档类型？例如以标准模式渲染。这在尝试控制渲染时会产生重大影响。
我在原帖中添加了几行，希望有助于澄清
刚刚注意到在您上面编辑的示例中，您的样式表中有两个 td.col3。如果这是您的问题，这将是前额扁平化，我只能假设这是帖子中的一个小错字，而不是您的实际代码。

标签： google-chrome padding column-width

【解决方案1】：

我已尝试重现您的问题，但以下在 Chrome 7 和 Firefox 3.6 中对我来说完全一样：

<!DOCTYPE html>
<style>
table { table-layout: fixed; border: 1px solid black; }
td { width: 5px; background: green; outline: 1px solid red; padding: 5px; }
</style>
<table>
<tr><td></td><td></td></tr>
</table>

为了解决您的问题，如果您还没有文档类型，我建议您先尝试添加一个文档类型。使用 doctype 将触发标准模式，这意味着浏览器之间的行为更有可能保持一致。我上面使用的<!DOCTYPE html> 是HTML5 doctype，但它实际上可以在pretty much all browsers 中触发标准模式。

如果标准模式不能帮助您获得更好的一致性，那么请尝试将您的问题简化为最小示例；剥离所有无关紧要的东西，直到你只剩下足够看到你的问题。我上面给出的例子说明了我的意思是多么的小。足够的标记和样式，以便能够轻松地查看表格并在浏览器之间进行比较。一旦你减少到一个最小的例子，你可能会自己看到问题，或者如果没有，你可以在 StackOverflow 之类的论坛上发布一些内容并获得更多有用的答案，因为人们不必猜测是什么你的问题是，或者浏览一整页的 HTML 和 CSS 只是为了找到你提到的一个小问题。

【讨论】：

【解决方案2】：

原因可能是两者之一：

您设置了表格和单个单元格的宽度属性，单元格的总宽度与您分配给表格的值不一样；或
单元格的总宽度（以及表格的宽度）大于包含元素的宽度 (div)。如果是这种情况，Chrome 将重新分配单元格宽度，使其与您的 CSS 不同。

查看您的标记，我建议您首先将实际值设置为 td.col3 或删除“auto”，然后看看会发生什么。

【讨论】：

【解决方案3】：

我有同样的问题，很遗憾，我没有找到真正的解决方案，但我找到了另外两个线程，一个错误报告 + 一个解决方法。

线程：

错误报告：

https://bugs.webkit.org/show_bug.cgi?id=13339

可能的解决方案：参见第二个线程。

【讨论】：

【解决方案4】：

对于表格布局：用 CSS 修复：

td { width: 150px; padding: 5px; }

下图显示了结果（左：Chrome；右：Firefox）： [stackoverflow 不允许我发布图片.. 尚未]

铬：5-140-5 火狐：5-150-5

建议/解决方法：尽量不要在 td 层上使用填充。使用 div/span 元素将您的内容包装在 td 中：

span.column_wrap
{
    padding: 0 3px;
    display: block;
    line-height: 26px;
}

<td><span class="column_wrap">content here</span></td>

【讨论】：

【解决方案5】：

在遇到此错误后，我注意到在 Chrome 中，如果将表格行的高度（例如表格的标题）添加到 40，然后将 5 填充添加到整个表格，表格行高现在变为 45。这在 Firefox 上不会发生。

所以，为了解决这个问题，我在 css 中设置了该行的高度并添加了 0 填充：

.title {
    height: 45px;
    padding: 0px; 
}

在包含表格标题的表格行上，然后向表格添加填充。现在我可以有 45px 高度 + 10px 填充，标题行保持在 45px（而不是变成 55）。

【讨论】：