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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (63)

我已经把它分解成一个相当简单的例子。

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

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

我试过重置CSS,它不会改变结果任何想法,为什么这些呈现不同?

代码...

<!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>
提问于
用户回答回答于

显然,Firefox和Chrome在HTML 5中处理表单元格中填充的方式存在缺陷

当尝试使用0填充的标记和CSS时,它们是相同的。当切换DOCTYPE而不是HTML 5时,它们也是相同的。

用户回答回答于

对于HTML 5,如果默认的话,一些浏览器会在表格单元格中添加2PX。它被标记为一个bug,不要期望它总是这样。

table { line-height: 0; }

扫码关注云+社区