5

我现在已经搜索了将近半天......但我找不到为什么 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 在宽度内包含填充，而其他浏览器则添加它

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

4

5 回答 5

3

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

主题：

  1. 表格布局：修复了 Safari 中的渲染差异

  2. Webkit 浏览器在确定表格布局中的单元格宽度时不考虑填充：已修复

错误报告：

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

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

于 2011-06-19T13:03:02.260 回答
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 html>是 HTML5 文档类型，但它实际上可以在几乎所有浏览器中触发标准模式。

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

于 2010-08-31T01:43:20.737 回答
1

对于表格布局：用 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>
于 2011-09-20T08:40:04.953 回答
0

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

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

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

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

于 2012-09-30T10:40:02.160 回答
0

原因大概是以下两种之一：

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

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

于 2010-11-12T12:46:55.427 回答