blocks|key|881231|text|显然，火狐和Chrome在处理HTML5中表格单元格中的填充时存在一个错误：http://code.google.com/p/chromium/issues/detail?id=50633|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|881232|当您尝试使用0填充的标记和CSS时，它们是相同的。当您将DOCTYPE切换为非HTML5时，它们也是相同的。|881233|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/p/chromium/issues/detail?id=50633^0|12|1K|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

There's apparently a bug in the way Firefox and Chrome handle padding in table cells in HTML5: 
<a href="http://code.google.com/p/chromium/issues/detail?id=50633" rel="noreferrer">http://code.google.com/p/chromium/issues/detail?id=50633</a>

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.

blocks|key|1096160|text|对于HTML5，如果默认的行高是2px，一些浏览器会将2px添加到带有图像的表格单元格中。它被标记为bug，不要期望它总是这样。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1096161|table+{+line-height:+0;+}|code-block|syntax|javascript|1096162|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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.

<pre><code>table { line-height: 0; }
</code></pre>

blocks|key|881459|text|它应该像这样写成这个padding:+0+10px+0+10px;，否则浏览器不会完全支持这个维度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|881460|entityMap^0|A|N|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

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

blocks|key|881546|text|实际上，这种行为是由TD元素上box-sizing值的不同默认值引起的。看一下规范：http://www.w3.org/TR/css3-ui/#box-sizing0|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|881547|幸运的是，所有主流浏览器都支持框大小调整，请参阅http://caniuse.com/#search=box-sizing|881548|但是浏览器中存在一些问题，使您无法覆盖默认的box-sizing值，特别是当您使用TD时，这种行为在不同的浏览器中几乎是不可预测的。|881549|在this+JSFiddle+example中，最稳定的跨浏览器行为是由border-box和content-box在DIV元素上显示的。|881550|因此，只要避免在高度固定时使用填充，而只需使用额外的填充容器包装TD内容，这是一种简单且防弹的解决方法。|881551|希望这能有所帮助！|881552|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/css3-ui/#box-sizing0|1|http://caniuse.com/#search=box-sizing|2|http://jsfiddle.net/22s9G/7/^0|F|A|16|15|0|0|O|11|1|0|M|A|0|10|A|1B|B|1|L|2|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@$9|14|A|15|1|16]]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|H|3|I|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1E|8|@$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]]|D|@$9|1J|A|1K|1|1L]]|E|$]]|$1|L|3|M|5|6|7|1M|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1N|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]|X|$5|S|T|U|E|$V|Y]]|Z|$5|S|T|U|E|$V|10]]]]

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

Box-sizing is luckily supported on all major browsers, see <a href="http://caniuse.com/#search=box-sizing" rel="nofollow">http://caniuse.com/#search=box-sizing</a>

But there are issues in browsers preventing you from overriding default <code>box-sizing</code> value, especially when you are working with TD, the behavior is almost unpredictable across browsers.

In <a href="http://jsfiddle.net/22s9G/7/" rel="nofollow">this JSFiddle example</a> the most stable behavior across browsers is shown by <code>border-box</code> and <code>content-box</code> on a DIV element.

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.

Hope this helps!

blocks|key|1096547|text|我发现火狐浏览器特定的CSS+(from+here)有点描述性，就像：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1096548|background-color:#447d9a;
background-image:url('img/bg.jpg');
background-repeat:repeat-x;|code-block|syntax|javascript|1096549|因此，我认为，对于火狐来说，填充可以是描述性的，相当简短(padding:10px+0+0+0;)：|style|CODE|1096550|padding-top:+10px;
padding-right:+0px;
padding-bottom:+0px;
padding-left:+0px;|1096551|它是一种只针对Firefox的解决方案(或者也可以是一种解决方案)；并且可以专门针对其他浏览器进行调试。|1096552|entityMap|0|LINK|mutability|MUTABLE|url|http://www.netmagazine.com/tutorials/get-grips-css3-multiple-background-images^0|G|9|0|0|0|T|J|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|13|8|@$A|14|B|15|K|L]]|9|@]|C|$]]|$1|M|3|N|5|F|7|16|8|@]|9|@]|C|$G|H]]|$1|O|3|P|5|6|7|17|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

I found browser-specific CSS (<a href="http://www.netmagazine.com/tutorials/get-grips-css3-multiple-background-images" rel="nofollow">from here</a>) for Firefox is a bit descriptive like:

<pre><code>background-color:#447d9a;
background-image:url('img/bg.jpg');
background-repeat:repeat-x;
</code></pre>

So, I think, for firefox, padding can be descriptive rather brief (<code>padding:10px 0 0 0;</code>):

<pre><code>padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
</code></pre>

It's a solution (or can be a solution) only for Firefox; and can work for the other browsers to debug specifically.

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.

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.

I've tried using Eric's reset css, it doesn't change the result
Any ideas why these are being rendered differently? 

An example of how it looks is here - http:// yfrog. com/5zqa7p

And the Code...

<pre><code>&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;title&gt;padding test&lt;/title&gt;
&lt;meta charset=utf-8&gt;
&lt;style&gt;
td { width: 100px; height:100px; background: green; padding: 10px 0 0 0; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table&gt;
&lt;tr&gt;&lt;td&gt;TEST&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;TEST&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
</code></pre>

HTML5 Table cell padding - different in browsers

容器

HTML5

我已经将其分解为一个相当简单的示例。对我来说，它在Chrome7.0和Firefox 3.6.12中看起来不一样。IE9测试版看起来像Chrome。我希望能够在TD上设置填充，并让它在所有浏览器中呈现相同的高度。目前，使用10px的顶部填充，Chrome中的单元格看起来比Firefox中的更高。我试过使用Eric的重置...

问HTML5表格单元格边距-在浏览器中有所不同
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5表格单元格边距-在浏览器中有所不同EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5表格单元格边距-在浏览器中有所不同
EN