Html HTML5 表格单元格填充 - 在浏览器中不同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4134107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Table cell padding - different in browsers
提问by kolcun
I've broken this down to a fairly simple example.
我已将其分解为一个相当简单的示例。
For me, it looks different in Chrome 7.0 than it does in Firefox 3.6.12. IE 9 beta looks like Chrome.
对我来说，它在 Chrome 7.0 中看起来与在 Firefox 3.6.12 中不同。IE 9 测试版看起来像 Chrome。
I'd like to be able to set padding on the TD, and have it render with the same height in all browsers. Currently, with the 10px top padding, the cells in Chrome look taller than in Firefox.
我希望能够在 TD 上设置填充，并让它在所有浏览器中以相同的高度呈现。目前，使用 10px 顶部填充，Chrome 中的单元格看起来比 Firefox 中的更高。
I've tried using Eric's reset css, it doesn't change the result Any ideas why these are being rendered differently?
我试过使用 Eric 的重置 css，它不会改变结果任何想法为什么这些呈现不同？
An example of how it looks is here - http:// yfrog. com/5zqa7p
它的外观示例在这里 - http://yfrog。com/5zqa7p
And the Code...
和代码...
<!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>
采纳答案by Robusto
There's apparently a bug in the way Firefox and Chrome handle padding in table cells in HTML5: http://code.google.com/p/chromium/issues/detail?id=50633
Firefox 和 Chrome 处理 HTML5 中表格单元格填充的方式显然存在错误：http: //code.google.com/p/chromium/issues/detail?id= 50633
When you try your markup and CSS with 0 padding, they're the same. When you switch the DOCTYPE to be not HTML5 they are the same as well.
当您尝试使用 0 填充的标记和 CSS 时，它们是相同的。当您将 DOCTYPE 切换为非 HTML5 时，它们也是相同的。
回答by u1347916
For HTML5 some browsers add 2px to table cells with images if line-height is default. It's flagged as a bug, don't expect it to always be like this.
对于 HTML5，如果 line-height 是默认值，一些浏览器会向带有图像的表格单元格添加 2px。它被标记为错误，不要指望它总是这样。
table { line-height: 0; }
回答by gkond
Actually, this behavior is caused by different defaults of box-sizingvalues on TD elements. Take a look at the spec: http://www.w3.org/TR/css3-ui/#box-sizing0
实际上，这种行为是由box-sizingTD 元素上不同的默认值引起的。看看规范：http: //www.w3.org/TR/css3-ui/#box-sizing0
Box-sizing is luckily supported on all major browsers, see http://caniuse.com/#search=box-sizing
幸运的是，所有主要浏览器都支持 Box-sizing，请参阅http://caniuse.com/#search=box-sizing
But there are issues in browsers preventing you from overriding default box-sizingvalue, especially when you are working with TD, the behavior is almost unpredictable across browsers.
但是浏览器中存在一些问题，阻止您覆盖默认box-sizing值，尤其是当您使用 TD 时，跨浏览器的行为几乎是不可预测的。
In this JSFiddle examplethe most stable behavior across browsers is shown by border-boxand content-boxon a DIV element.
在此的jsfiddle示例跨浏览器中最稳定的行为是由所示border-box和content-box一个DIV元件上。
So just avoid using padding when height is fixed, and instead just wrap TD contents with additional padding container as a simple and bulletproof workaround.
因此，当高度固定时，请避免使用填充，而只需将 TD 内容与额外的填充容器包装起来，作为一种简单且防弹的解决方法。
Hope this helps!
希望这可以帮助！
回答by Kyle
td { padding: 10px 0 0 0; }
This says: padding-top: 10px;, replace the 10px with 0 and hopefullyit'll be the same. This means that Firefox and IE9 are not accounting for padding. (I think)
这说：padding-top: 10px;，用 0 替换 10px ，希望它会是一样的。这意味着 Firefox 和 IE9 不考虑填充。（我认为）
回答by 4michaelcoleman
It should be written like this padding: 0 10px 0 10px;otherwise browsers wont fully support the dimension.
应该这样写，padding: 0 10px 0 10px;否则浏览器不会完全支持维度。
回答by Mayeenul Islam
I found browser-specific CSS (from here) for Firefox is a bit descriptive like:
我发现Firefox的特定于浏览器的 CSS（来自此处）有点描述性，例如：
background-color:#447d9a;
background-image:url('img/bg.jpg');
background-repeat:repeat-x;
So, I think, for firefox, padding can be descriptive rather brief (padding:10px 0 0 0;):
所以，我认为，对于 Firefox，填充可以是描述性的相当简短的 ( padding:10px 0 0 0;)：
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
It's a solution (or can be a solution) only for Firefox; and can work for the other browsers to debug specifically.
它是一个仅适用于 Firefox 的解决方案（或可以是一个解决方案）；并且可以为其他浏览器专门调试。
