HTML5表格单元格填充 - 在浏览器中不同 [英] HTML5 Table cell padding - different in browsers
问题描述
对于我来说，Chrome 7.0看起来不同于Firefox 3.6.12。 IE 9 beta看起来像Chrome。
我想能够在TD上设置填充，并使它在所有浏览器中以相同的高度进行渲染。目前，使用10px顶部填充，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;背景：绿色; padding：10px 0 0 0; }
< / style>
< / head>
< body>
< table>
< tr>< td> TEST< / td>< / tr>
< tr>< td> TEST< / td>< / tr>
< / table>
< / body>
Firefox和Chrome处理方式HTML5中表格单元格中的填充：
http://code.google.com/p / chromium / issues / detail？id = 50633
当你用0填充测试你的标记和CSS时，它们是一样的。当您将DOCTYPE切换为非HTML5时，它们也是一样的。
I've broken this down to a farily simple exmaple.
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?
Thanks a lot!
An example of how it looks is here - 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>
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
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.
这篇关于HTML5表格单元格填充 - 在浏览器中不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
