Firefox：盒子模型的錯誤解釋？

我剛剛發現Firefox的奇怪行爲。Firefox：盒子模型的錯誤解釋？

如果我有一個100像素高度的表格單元格，並添加20px的填充 - 它的總高度應該變成140px。

所有瀏覽器中正確行爲，火狐8.0忽略填充：

http://jsfiddle.net/8wDde/

任何人都知道一個修復？

來源

2011-12-03 ptriek

在Firebug中，它計算填充量，但計算出的高度爲60px。 –

也許與Firefox的默認樣式有些問題。重置樣式不會工作太...（http://meyerweb.com/eric/tools/css/reset/） – rekire

您的意思是一個CSS重置？相同的結果... http://jsfiddle.net/8wDde/3/ – ptriek

這似乎是最好的跨瀏覽器的解決方案可能是設置錶行等的整個高度到該單元的高度和填充：

tr {height: 140px;}

參見：http://jsfiddle.net/8wDde/19/

來源

2011-12-03 21:02:10 ScottS

這是一個奇怪的行爲。添加display:block;可以解決問題。在FF8.01見測試：

http://jsfiddle.net/8wDde/1/

但我也不知道爲什麼？

我搜索了https://developer.mozilla.org/en-US/search?q=table+padding，但沒有找到任何東西。也許你也可以嘗試在那裏搜索。

UPDATE： http://jsfiddle.net/8wDde/7/

添加overflow:hidden避免td變線。

來源

2011-12-03 19:20:23 Giberno

看起來'td'標籤沒有設置'display：block'。但它是一個奇怪的塊元素。 – rekire

+1對於本發明 - 然而 - 它只適用於具有一個單元格的表格： -/http://jsfiddle.net/8wDde/4/ – ptriek

@rekire表格單元格的默認'display'值是'table-cell' 。 –

我在Google上找不到這方面的任何信息，因此修復Firefox的一種方法就是使用CSS hack。

@-moz-document url-prefix() { 
td{ 
    height:140px !important; 
} 
}

顯然，如果高度爲200px，那麼你會改變，要240px佔失蹤20px頂部和底部上。

針對所有Firefox版本，我不確定是否有FF8特定的CSS黑客入侵。

你可以看到這個演示這裏：http://jsfiddle.net/charlescarver/8wDde/2/

編輯：我喜歡Giberno的回答更

來源

2011-12-03 19:21:13 Charlie

這是一個骯髒的把戲;-) – rekire

確實很骯髒，也許是一個最終的度假勝地......但是，謝謝！ – ptriek

如果一切都失敗，玩弄髒;） – Charlie

Diagram of row, cell box and padding effect

這是一對夫婦的意見，我對another question提出，希望一點點更清晰的更詳細的描述。請注意，Opera具有與Firefox相同的行爲。

在上圖中，總單元區域是暗框，文本My Text是td的內容，正是它定義了單元格框（C）。

現在，CSS 2。1個規範說：

一個「錶行」元素框的高度計算，一旦用戶代理有可用的行中的所有單元格：它是最大的行的計算「高度」的，行中每個單元格的計算「高度」以及單元格所需的最小高度（MIN）。「高度」「表格行」的「自動」值表示用於佈局的行高度是MIN。 MIN取決於單元格高度和單元格對齊方式（很多類似於線框高度的計算）。 ...

在CSS 2.1中，單元格框的高度是所需的最小高度。表格單元的「高度」屬性可以影響該行的高度（請參閱上文），但不會增加單元格框的高度。

所以td { height:100px; }影響行高（R）（它將至少100px高），但不會影響單元格框（C）。

另一方面，td { padding:20px; }適用於單元格框（C），所以如果（C）+頂部填充+底部填充的高度小於100像素，則行高不會受到影響，仍然爲100px。

如果（C）+頂部填充+底部填充大於100像素，則行高將展開以適應（C）+頂部填充+底部填充的全部高度。

然後td { background-color:blue }適用於全行高（R）和單元寬度。

您可以在http://jsfiddle.net/Ez7xz/

在行動中看到這最後的混淆因素是在Firebug的td的計算高度的價值。這裏似乎正在發生的是，假定高度是content-box框尺寸的結果，並報告R的值減去頂部和底部填充。雖然這看起來很奇怪，但它能合理報告的其他價值並不明顯。

來源

2011-12-05 01:38:24 Alohci

Firefox：盒子模型的錯誤解釋？

回答

相關問題