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

标签 css html html-table cross-browser padding

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

对我来说,它在 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>

最佳答案

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

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

关于css - HTML5 表格单元格填充 - 在浏览器中有所不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4134107/

相关文章:

javascript - 在 Javascripts 中对非英文名称进行排序

javascript - jQuery each 和 change 合并

javascript - 如何使用ajax从div id中提取数据?

javascript - HTML 行跨度与 css 元素冲突

php 包含在 html css 中

javascript - 如何使 div 自动滚动到底部?

php - 选择一个表并使用 while 循环将其数据显示在表中

html - 如何垂直对齐导航内容

javascript - 插入图片的文件路径

android - 如何计算设备像素比