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

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 beta看起来像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>

6 个解决方案

#1

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时，它们也是相同的。

#2

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; }

#3

Actually, this behavior is caused by different defaults of box-sizing values on TD elements. Take a look at the spec: http://www.w3.org/TR/css3-ui/#box-sizing0

实际上，此行为是由TD元素上的box-sizing值的不同默认值引起的。看看规范：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-sizing value, especially when you are working with TD, the behavior is almost unpredictable across browsers.

但是浏览器中存在一些问题，阻止您覆盖默认的大小调整值，尤其是在使用TD时，浏览器的行为几乎无法预测。

In this JSFiddle example the most stable behavior across browsers is shown by border-box and content-box on a DIV element.

在这个JSFiddle示例中，跨浏览器的最稳定行为由DIV元素上的border-box和content-box显示。

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!

希望这可以帮助！

#4

td { padding: 10px 0 0 0; }

This says: padding-top: 10px;, replace the 10px with 0 and hopefully it'll be the same. This means that Firefox and IE9 are not accounting for padding. (I think)

这说：padding-top：10px ;,用0替换10px，希望它们是相同的。这意味着Firefox和IE9不考虑填充。（我认为）

#5

It should be written like this padding: 0 10px 0 10px; otherwise browsers wont fully support the dimension.

它应该写成这样的填充：0 10px 0 10px;否则浏览器不会完全支持维度。

#6

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，填充可以描述性相当简短（填充：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的解决方案（或者可以是解决方案）;并可以为其他浏览器专门调试。

#1