HTML5表格單元格填充 - 在瀏覽器中有所不同

Question

我把它簡化為一個相當簡單的例子。

對我來說，它在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; background: green; padding: 10px 0 0 0; }
</style>
</head>
<body>
<table>
<tr><td>TEST</td></tr>
<tr><td>TEST</td></tr>
</table>
</body>

Answer 1

Firefox和Chrome在HTML5中的表格單元格中處理填充的方式顯然存在錯誤： http ： //code.google.com/p/chromium/issues/detail？ id = 50633

當您嘗試使用0填充的標記和CSS時，它們是相同的。 當您將DOCTYPE切換為非HTML5時，它們也是相同的。

Answer 2

對於HTML5，如果line-height是默認值，某些瀏覽器會向帶有圖像的表格單元格添加2px。 它被標記為一個錯誤，不要指望它總是像這樣。

table { line-height: 0; }

Answer 3

實際上，此行為是由TD元素上的box-sizing值的不同默認值引起的。 看看規范： http ： //www.w3.org/TR/css3-ui/#box-sizing0

所有主流瀏覽器都支持box-sizing，請參閱http://caniuse.com/#search=box-sizing

但是瀏覽器存在一些問題，阻止您覆蓋默認box-sizing值，尤其是當您使用TD時，瀏覽器的行為幾乎是不可預測的。

在這個JSFiddle示例中，跨瀏覽器的最穩定行為由DIV元素上的border-box和content-box顯示。

因此，只要在高度固定時避免使用填充，而只需使用額外的填充容器包裝TD內容作為簡單的防彈解決方法。

希望這可以幫助！

Answer 4

td { padding: 10px 0 0 0; }

這說： padding-top: 10px; ，將10px替換為0，希望它們是相同的。 這意味着Firefox和IE9不考慮填充。 （我認為）

Answer 5

它應該寫成這樣的padding: 0 10px 0 10px; 否則瀏覽器不會完全支持維度。

Answer 6

我發現Firefox的瀏覽器特定CSS（從這里開始）有點描述性：

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

所以，我認為，對於firefox，填充可以描述相當簡短（ padding:10px 0 0 0; ）：

padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

它只是Firefox的解決方案（或者可以是解決方案）; 並可以為其他瀏覽器專門調試。

HTML5表格單元格填充 - 在瀏覽器中有所不同

問題描述

6 個解決方案

解決方案1
15 已采納 2010-11-09 13:36:00

解決方案2
9 2012-05-04 01:57:06

解決方案3
3 2012-10-23 07:11:27

解決方案4
2 2010-11-09 13:32:14

解決方案5
1 2012-09-27 22:14:39

解決方案6
1 2012-10-24 19:24:17

HTML5表格單元格填充 - 在瀏覽器中有所不同

問題描述

6 個解決方案

解決方案1 15 已采納 2010-11-09 13:36:00

解決方案2 9 2012-05-04 01:57:06

解決方案3 3 2012-10-23 07:11:27

解決方案4 2 2010-11-09 13:32:14

解決方案5 1 2012-09-27 22:14:39

解決方案6 1 2012-10-24 19:24:17

解決方案1
15 已采納 2010-11-09 13:36:00

解決方案2
9 2012-05-04 01:57:06

解決方案3
3 2012-10-23 07:11:27

解決方案4
2 2010-11-09 13:32:14

解決方案5
1 2012-09-27 22:14:39

解決方案6
1 2012-10-24 19:24:17