爲什麼box-sizing在table vs div上表現不同？

這裏的HTML：http://jsfiddle.net/jC8DL/1/爲什麼box-sizing在table vs div上表現不同？

<div style='width:300px;border:1px solid green'> 
    <div>Outer div</div> 
    <div style='width:100%;border:1px solid red;margin:10px;'> 
    Inner div, 10px margin. 
    </div> 
    <div style='width:100%;border:1px solid red;padding:10px;'> 
    Inner div, 10px padding. 
    </div> 
    <div style='width:100%;border:1px solid red;padding:10px;box-sizing:border-box'> 
    Same, with box-sizing: border-box 
    </div> 
    <table style='width:100%;border:1px solid red;padding:10px;'> 
    <tr><td>Inner table, 10px padding</td></tr> 
    </table> 
</div>

它看起來像這在我的瀏覽器：

enter image description here

我想我明白了一切，直到最後一個。我的Chrome檢查員顯示該表的計算box-sizing風格是content-box，所以我期望它的行爲像第二個div，並溢出，看起來很醜。爲什麼不同？這是記錄在HTML/CSS規範的某處嗎？

來源

2013-09-28 Rob N

這是因爲'div'是塊元素。嘗試添加'display：block;'到內部表格。它將顯示與div相同的內容。 –

@Bram Vanroy：1）那就是[請求問題]（https://en.wikipedia.org/wiki/Begging_the_question）。 2）這個問題的重點是要問一個表爲什麼表現不同於一個塊;如何將表格變成塊來完成？ – BoltClock

@BoltClock你錯誤地解釋了我的評論（因此，它是*評論*）。總之，我在解釋爲什麼會出現這種差異。我沒有試圖回答這個問題。無論如何，我沒有把它作爲答案發布。 –

是，CSS2.1狀態中的表與以下的separated borders model：

然而，在HTML和XHTML1，所述<表>元件的寬度是向右從左邊界邊緣的距離邊界邊緣。

注意：在CSS3中，這個特殊的要求將根據UA樣式表規則和'box-sizing'屬性來定義。

的box-sizing目前CSS3的定義並沒有說這事，但翻譯上面的引號，基本上意味着在（X）HTML，表使用邊界盒模型：填充和邊框不添加到指定一張桌子的寬度。

注意，在box-sizing性能而言，不同的瀏覽器似乎以不同的方式處理這一特殊情況：

鉻
box-sizing被設置爲初始值，content-box;改變它沒有任何影響。內聯樣式中既沒有重新聲明box-sizing: content-box，也沒有。無論哪種方式，Chrome似乎都迫使表格始終使用邊框模型。
IE
box-sizing設置爲border-box;將其更改爲content-box會導致其表現得像第二個div。
火狐
-moz-box-sizing設置爲border-box;將其更改爲content-box或padding-box會導致其相應地調整大小。

由於CSS3還沒有提及表格大小的任何提及，這不應該是一個驚喜。最起碼，結果是一樣的 - 只有底層的實現纔是不同的。但考慮到上面的說明，我會說IE和Firefox更接近CSS3的定義，因爲在Chrome中，您似乎無法使用box-sizing屬性更改表格的框模型。

表與collapsing border model沒有填充所有，雖然在這種情況下，由於您的表不使用這種模式是不相關的：

注意，在這個模型中，寬度該表格包括一半的表格邊框。而且，在這個模型中，一個表格沒有填充（但有邊距）。

來源

2013-09-28 16:31:23 BoltClock

這就是如何<table><td><th>元素的作品。這些元素不是塊級元素。

它包含給定寬度內的填充，就像box-sizing:border-box在其他塊級別元素上所做的一樣。

僅供參考，我沒有找到它的任何文件。

來源

2013-09-28 16:29:30

爲什麼box-sizing在table vs div上表現不同？

回答

相關問題