HTML5表格单元格边距-在浏览器中有所不同
我已经将其分解为一个相当简单的示例。
对我来说，它在Chrome7.0和Firefox 3.6.12中看起来不一样。IE9测试版看起来像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>回答 5
Stack Overflow用户
发布于 2010-11-09 21:36:01
显然，火狐和Chrome在处理HTML5中表格单元格中的填充时存在一个错误：http://code.google.com/p/chromium/issues/detail?id=50633
当您尝试使用0填充的标记和CSS时，它们是相同的。当您将DOCTYPE切换为非HTML5时，它们也是相同的。
Stack Overflow用户
发布于 2012-05-04 09:57:06
对于HTML5，如果默认的行高是2px，一些浏览器会将2px添加到带有图像的表格单元格中。它被标记为bug，不要期望它总是这样。
table { line-height: 0; }Stack Overflow用户
发布于 2012-10-23 15:11:27
实际上，这种行为是由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内容，这是一种简单且防弹的解决方法。
希望这能有所帮助！
https://stackoverflow.com/questions/4134107
复制相似问题