chrome vs FF/IE/Opera 计算表格单元格宽度？ （表格布局：固定）
Posted
技术标签:
【中文标题】chrome vs FF/IE/Opera 计算表格单元格宽度？ （表格布局：固定）【英文标题】：chrome vs FF/IE/Opera in calculating table cell width ? (table-layout:fixed) 【发布时间】：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。如果这是您的问题，这将是前额扁平化，我只能假设这是帖子中的一个小错字，而不是您的实际代码。 【参考方案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 中触发标准模式。
如果标准模式不能帮助您获得更好的一致性，那么请尝试将您的问题简化为最小示例；剥离所有无关紧要的东西，直到你只剩下足够看到你的问题。我上面给出的例子说明了我的意思是多么的小。足够的标记和样式，以便能够轻松地查看表格并在浏览器之间进行比较。一旦你减少到一个最小的例子，你可能会自己看到问题，或者如果没有，你可以在 *** 之类的论坛上发布一些内容并获得更多有用的答案，因为人们不必猜测是什么你的问题是，或者浏览一整页的 HTML 和 CSS 只是为了找到你提到的一个小问题。
【讨论】：
【参考方案2】：原因可能是两者之一：
-
您设置了表格和单个单元格的宽度属性，单元格的总宽度与您分配给表格的值不一样；或
单元格的总宽度（以及表格的宽度）大于包含元素的宽度 (div)。如果是这种情况，Chrome 将重新分配单元格宽度，使其与您的 CSS 不同。
查看您的标记，我建议您首先将实际值设置为 td.col3 或删除“auto”，然后看看会发生什么。
【讨论】：
【参考方案3】：我有同样的问题，很遗憾，我没有找到真正的解决方案，但我找到了另外两个线程，一个错误报告 + 一个解决方法。
线程：
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
可能的解决方案：参见第二个线程。
【讨论】：
【参考方案4】：对于表格布局：用 CSS 修复：
td width: 150px; padding: 5px;
下图显示了结果（左：Chrome；右：Firefox）： [*** 不允许我发布图片.. 尚未]
铬：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）。
【讨论】：
以上是关于chrome vs FF/IE/Opera 计算表格单元格宽度？ （表格布局：固定）的主要内容，如果未能解决你的问题，请参考以下文章