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

對我而言，Chrome 7.0看起來與Firefox 3.6.12不同。 IE 9測試版看起來像Chrome。

我希望能夠在TD上設置填充，並使其在所有瀏覽器中都具有相同的高度。目前，使用10px頂部填充，Chrome中的單元格比Firefox中的單元格更高。

我試過使用埃裏克的重置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>

來源

2010-11-09 kolcun

有明顯的方式中的錯誤Firefox和Chrome柄填充表格單元格中的HTML5： http://code.google.com/p/chromium/issues/detail?id=50633

當您嘗試您的標記和CSS以0填充，它們是相同的。當您將DOCTYPE切換爲不是HTML5時，它們也是一樣的。

來源

2010-11-09 13:36:00 Robusto

是的 - 刪除doctype使兩個瀏覽器呈現相同的（IE也） – kolcun 2010-11-09 18:14:49

td { padding: 10px 0 0 0; }

此說：padding-top: 10px;，用0和希望這將是相同的更換10px的。這意味着Firefox和IE9沒有考慮填充。（我認爲）

來源

2010-11-09 13:32:14 Kyle

對於HTML5，如果行高爲默認值，某些瀏覽器會將帶有圖像的表格單元格添加2px。它被標記爲一個bug，不要指望它總是這樣。

table { line-height: 0; }

來源

2012-05-04 01:57:06

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

來源

2012-09-27 22:14:39 4michaelcoleman

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

箱尺寸是幸運支持所有主流瀏覽器，看到http://caniuse.com/#search=box-sizing

但也有在瀏覽器中的問題導致您無法覆蓋默認box-sizing價值，特別是當你與TD合作，這種行爲在瀏覽器中幾乎是不可預知的。

在this JSFiddle example跨瀏覽器中最穩定的行爲由border-box和content-box所示的DIV元件上。

所以，只要避免在高度固定時使用填充，而不是使用附加填充容器包裝TD內容作爲簡單且防彈的解決方法。

希望這有助於！

來源

2012-10-23 07:11:27 gkond

我發現瀏覽器特定CSS（from here）爲Firefox是有點描述，如：

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

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

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

這是一個僅適用於Firefox的解決方案（或可以是解決方案）;並可以爲其他瀏覽器專門調試。

來源

2012-10-24 19:24:17

這實際上並不特定於Firefox。填充屬性的簡寫版本和長版本都是CSS 2.1規範的一部分，並且在所有瀏覽器中都受支持。（http://www.w3.org/TR/CSS21/box.html#padding-properties） – 2012-10-25 13:50:56

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

回答

相關問題