Question

我把它简化为一个相当简单的例子。

对我而言，Chrome 7.0与Firefox 3.6.12相比有所不同。 IE 9 beta看起来像Chrome。

我希望能够在TD上设置填充，并在所有浏览器中以相同的高度渲染它。目前，使用10px顶部填充，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>

Answer 1

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

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

Answer 2

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

table { line-height: 0; }

Answer 3

实际上，此行为是由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内容作为简单的防弹解决方法。

希望这有帮助！

Answer 4

td { padding: 10px 0 0 0; }

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

Answer 5

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

Answer 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的解决方案（或者可以是解决方案）;并且可以为其他浏览器专门调试。

HTML5表格单元格填充 - 在浏览器中有所不同

6 个答案: