HTML5 表格单元格填充 - 在浏览器中不同答案

【问题标题】：HTML5 Table cell padding - different in browsersHTML5 表格单元格填充 - 在浏览器中不同
【发布时间】：2011-05-07 06:05:54
【问题描述】：

我已将其分解为一个相当简单的示例。

对我来说，Chrome 7.0 和 Firefox 3.6.12 看起来不一样。 IE 9 beta 看起来像 Chrome。

我希望能够在 TD 上设置填充，并让它在所有浏览器中以相同的高度呈现。目前，使用 10 像素的顶部填充，Chrome 中的单元格看起来比 Firefox 中的要高。

我尝试过使用 Eric 的重置 css，它不会改变结果任何想法为什么这些呈现不同？

它的外观示例在这里 - http://yfrog。 com/5zqa7p

还有代码...

<!DOCTYPE html>
<head>
<title>padding test</title>
<meta charset=utf-8>
<style>
td { width: 100px; height:100px; background: green; padding: 10px 0 0 0; }
</style>
</head>
<body>
<table>
<tr><td>TEST</td></tr>
<tr><td>TEST</td></tr>
</table>
</body>

【问题讨论】：

标签： css html html-table cross-browser padding

【解决方案1】：

td { padding: 10px 0 0 0; }

这说：padding-top: 10px;，将 10px 替换为 0，希望会是一样的。这意味着 Firefox 和 IE9 不考虑填充。（我认为）

【讨论】：

【解决方案2】：

Firefox 和 Chrome 在 HTML5 中处理表格单元格中的填充的方式显然存在错误： http://code.google.com/p/chromium/issues/detail?id=50633

当您尝试使用 0 填充的标记和 CSS 时，它们是相同的。当您将 DOCTYPE 切换为非 HTML5 时，它们也是相同的。

【讨论】：

是的 - 删除 doctype 会使两个浏览器呈现相同的内容（IE 也是）

【解决方案3】：

对于 HTML5，如果 line-height 是默认值，一些浏览器会在带有图像的表格单元格中添加 2px。它被标记为错误，不要指望它总是这样。

table { line-height: 0; }

【讨论】：

【解决方案4】：

应该这样写padding: 0 10px 0 10px;否则浏览器不会完全支持这个维度。

【讨论】：

【解决方案5】：

实际上，这种行为是由 TD 元素上的 box-sizing 值的不同默认值引起的。看一下规范：http://www.w3.org/TR/css3-ui/#box-sizing0

幸运的是，所有主要浏览器都支持 Box-sizing，请参阅 http://caniuse.com/#search=box-sizing

但浏览器中存在一些问题，阻止您覆盖默认的 box-sizing 值，尤其是当您使用 TD 时，这种行为几乎无法跨浏览器进行预测。

在this JSFiddle example 中，跨浏览器最稳定的行为由DIV 元素上的border-box 和content-box 显示。

因此，在高度固定时避免使用填充，而是使用额外的填充容器包装 TD 内容，作为一种简单且防弹的解决方法。

希望这会有所帮助！

【讨论】：

【解决方案6】：

我发现 Firefox 的特定于浏览器的 CSS (from here) 有点描述性，例如：

background-color:#447d9a;
background-image:url('img/bg.jpg');
background-repeat:repeat-x;

所以，我认为，对于 Firefox，填充可以是描述性的相当简短 (padding:10px 0 0 0;)：

padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

这是一个仅适用于 Firefox 的解决方案（或可以是一个解决方案）；并且可以为其他浏览器专门调试。

【讨论】：

这实际上并不特定于 Firefox。填充属性的简写和长格式版本都是 CSS 2.1 规范的一部分，并且在所有浏览器中都受支持。 (w3.org/TR/CSS21/box.html#padding-properties)