Css HTML5表格单元格填充-在浏览器中不同
我把它分解成一个相当简单的例子 对我来说，Chrome7.0和Firefox3.6.12看起来不一样。IE 9测试版看起来像Chrome 我希望能够在TD上设置填充，并让它在所有浏览器中以相同的高度渲染。目前，使用10px的顶部填充，Chrome中的单元格看起来比Firefox中的要高 我试过使用Eric的重置css，它不会改变结果 你知道为什么会有不同的表现吗 下面是它的外观示例—http://yfrog。com/5zqa7p 而代码Css HTML5表格单元格填充-在浏览器中不同,css,html,html-table,cross-browser,padding,Css,Html,Html Table,Cross Browser,Padding,我把它分解成一个相当简单的例子 对我来说，Chrome7.0和Firefox3.6.12看起来不一样。IE 9测试版看起来像Chrome 我希望能够在TD上设置填充，并让它在所有浏览器中以相同的高度渲染。目前，使用10px的顶部填充，Chrome中的单元格看起来比Firefox中的要高 我试过使用Eric的重置css，它不会改变结果 你知道为什么会有不同的表现吗 下面是它的外观示例—http://yfrog。com/5zqa7p 而代码 <!DOCTYPE html> <hea
<!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>
填充试验
td{宽度：100px；高度：100px；背景：绿色；填充：10px 0；}
试验
试验
上面写着：
paddingtop:10px，将10px替换为0，希望它也一样。这意味着Firefox和IE9没有考虑填充。（我认为）在HTML5中，Firefox和Chrome处理表格单元格填充的方式显然存在缺陷：
当您尝试使用0填充的标记和CSS时，它们是相同的。当您将DOCTYPE切换为非HTML5时，它们也是相同的。对于HTML5，如果默认为行高，则某些浏览器会向带有图像的表格单元格添加2px。它被标记为一个bug，不要期望它总是这样
table { line-height: 0; }
应该这样写padding:0 10px 0 10px
否则浏览器将无法完全支持该维度。实际上，这种行为是由TD元素上不同默认值的框大小所导致的。请看一下规范：
幸运的是，所有主要浏览器都支持框大小调整，请参阅
但是，浏览器中存在一些问题，阻止您覆盖默认的框大小
值，特别是当您使用TD时，这种行为在浏览器中几乎是不可预测的
在大多数情况下，跨浏览器的最稳定行为由DIV元素上的边框框
和内容框
显示
所以，只要在高度固定时避免使用填充物，而是用附加的填充容器包装TD内容物，作为一种简单、防弹的解决方法
希望这有帮助 我发现Firefox的特定于浏览器的CSS（）有点像：
background-color:#447d9a;
background-image:url('img/bg.jpg');
background-repeat:repeat-x;
因此，我认为，对于firefox，填充可以是描述性的，相当简短（padding:10px 0；
）：
这是一个解决方案（或可以是一个解决方案），只适用于Firefox；并且可以为其他浏览器专门调试。是的-删除doctype会使两个浏览器呈现相同的doctype（也就是说），这实际上并不特定于Firefox。填充属性的速记和长格式版本都是CSS 2.1规范的一部分，在所有浏览器中都受支持。()
background-color:#447d9a;
background-image:url('img/bg.jpg');
background-repeat:repeat-x;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;