Question

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

当然，如果您正在使用表格布局，这一点至关重要：已修复，由于他们突然间必须注意指定的px宽度。

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

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

（顺便说一句：任何想要告诉px宽度不适合web开发的人......随意静静地留下这个页面）

附加：（关于答复）
首先感谢你的即时回复......我试图让它尽可能短，并且我把事实减少到最低限度......但是，正如你所提到的，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在宽度范围内包含填充，而其他浏览器则添加

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

Answer 1

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

主题：

Table-layout:fixed rendering differences in Safari
Webkit browsers not accounting for padding when determining cell width in table-layout:fixed

错误报告：

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

可能的解决方案：见第二个帖子。

Answer 2

我已尝试重现您的问题，但在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将触发标准模式，这意味着浏览器之间的行为更可能是一致的。我上面使用的那个<!DOCTYPE html>是HTML5 doctype，但实际上它可以触发pretty much all browsers中的标准模式。

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

Answer 3

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

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

下面显示了结果（左：Chrome;右：Firefox）： [stackoverflow不允许我发布图片..但是]

CHROME：5-140-5 FIREFOX：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>

Answer 4

原因可能是两者之一：

您已设置表格和单个单元格的宽度属性，并且单元格的总宽度与您为表格指定的值不同;或
单元格的总宽度（以及表格的宽度）大于包含元素（div）的宽度。如果是这种情况，Chrome会重新分配单元格宽度，使其与CSS不同。

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

Answer 5

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

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

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

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

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

5 个答案:

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

5 个答案:

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