瀏覽器之間的TH盒模型的不同解釋

Question

我注意到瀏覽器之間在如何解釋TH標記的寬度方面的差異，具體而言是寬度計算中是否包含填充。

我正在構建一個可重用的庫，用於快速生成和樣式表（當然，對於表格數據）。這意味着我可以完全控制我生成的代碼，但我需要真正解決問題，而不是爲特定實例找到黑客。

最簡單的問題

甲TH在IE9和FF描述是基於其填充+寬度（如預期）的尺寸。 Chrome和Safari 包括寬度的填充，導致不良結果。

例如，如果單元格設置爲16px寬+ 4px的填充，IE9會正確顯示單元格爲20px寬。 Chrome將其顯示爲16px寬。

這裏是一個JS小提琴顯示的差異：http://jsfiddle.net/CZnau/

你可以看到的最後一個單元是如何瀏覽器之間具有不同的尺寸。

注意

• 我知道盒子大小和即使默認是不包括在細胞的寬度計算填充，設置box-sizing: content-box明確不能解決問題。

• 小提琴顯示一個固定的佈局表。我希望在其他情況下使用table-layout: fixed正確處理顯示。具體來說，我的實際實現使用文本溢出，包裝管理和可變寬度佈局。在我的測試中，使用固定佈局是使我的所有要求都能很好地一起玩的唯一可靠方法。另外，固定佈局表格可能會更快地渲染。

• 我已經試過每個TD明確設置寬度，但是這並沒有解決問題（也許它與固定佈局表的衝突？）

如果您想了解更多詳細信息，各地爲什麼我需要一個固定的佈局表，嘗試這個小提琴有和沒有table-layout: fixed，並注意不同之處。使用固定佈局時，表格的大小正確爲100％，並優雅地截斷文本，即使寬度可變的單元格也是如此。

http://jsfiddle.net/6GPmY/

Answer 1

Firefox不支持box-sizing: content-box;然而，即使不是在他們極光版。

在那之前，你可以使用-moz-box-sizing：

th, td { 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 8px; 
} 

jsFiddle Demo