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

对我而言，Chrome 7.0看起来与Firefox 3.6.12不同。 IE 9测试版看起来像Chrome。

我希望能够在TD上设置填充，并使其在所有浏览器中都具有相同的高度。目前，使用10px顶部填充，Chrome中的单元格比Firefox中的单元格更高。

我试过使用埃里克的重置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>

来源

2010-11-09 kolcun

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

当您尝试您的标记和CSS以0填充，它们是相同的。当您将DOCTYPE切换为不是HTML5时，它们也是一样的。

来源

2010-11-09 13:36:00 Robusto

是的 - 删除doctype使两个浏览器呈现相同的（IE也） – kolcun 2010-11-09 18:14:49

td { padding: 10px 0 0 0; }

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

来源

2010-11-09 13:32:14 Kyle

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

table { line-height: 0; }

来源

2012-05-04 01:57:06

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

来源

2012-09-27 22:14:39 4michaelcoleman

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

箱尺寸是幸运支持所有主流浏览器，看到http://caniuse.com/#search=box-sizing

但也有在浏览器中的问题导致您无法覆盖默认box-sizing价值，特别是当你与TD合作，这种行为在浏览器中几乎是不可预知的。

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

所以，只要避免在高度固定时使用填充，而不是使用附加填充容器包装TD内容作为简单且防弹的解决方法。

希望这有助于！

来源

2012-10-23 07:11:27 gkond

我发现浏览器特定CSS（from here）为Firefox是有点描述，如：

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

所以，我认为，对于火狐，填充可以是描述相当简短（padding:10px 0 0 0;）：

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

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

来源

2012-10-24 19:24:17

这实际上并不特定于Firefox。填充属性的简写版本和长版本都是CSS 2.1规范的一部分，并且在所有浏览器中都受支持。（http://www.w3.org/TR/CSS21/box.html#padding-properties） – 2012-10-25 13:50:56

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

回答

相关问题