表格佈局：Safari中的固定渲染差異

Question

基本上我遇到的問題是在Safari/Chrome中它改變了列的寬度，即使我已經指定a）表格寬度，b）表格佈局：固定的，和c）我的第一行上的特定寬度，當添加填充和邊框值時，添加到指定表的寬度。在IE7和Firefox 3中，表格呈現相同。但在Safari/Chrome中，它決定通過從其他列中佔用空間來增大第二列。

任何想法？我有一個very simple sample page，你可以看看，以及an image顯示如何在所有三個瀏覽器呈現表進行比較。

Answer 1

環顧四周後，我認爲這是由以下WebKit的錯誤引起的：13339和18565。基本上它是如何在計算列的最終寬度時使用邊框和填充值的問題。

我最終做了一些瀏覽器嗅探並設置了一些基於Webkit瀏覽器的不同的CSS值，以便最終的渲染與FF和IE相同。

Answer 2

您是否嘗試過加載一些重置CSS？ http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Answer 3

我能夠通過從固定寬度的<th>中刪除填充來解決此問題。然後，您可以安全地添加填充<td>

Answer 4

在越野車webkit，table-layout: fixed也給你的表格單元格box-sizing: border-box。瀏覽器檢測的一種替代方法是明確設置box-sizing: border-box以在瀏覽器中獲得一致的行爲，然後相應地調整寬度和高度（寬度和高度必須增加以包含填充和邊框）。

#my-table td { 
    box-sizing: border-box; 
} 

Answer 5

我做了一個劍道網格有表：固定寬度。所有列消失，但只在Safari中。經過檢查，td元素的計算樣式寬度均爲-3px。如果我刪除表：固定寬度，這很好。如果我指定自定義像素寬度（但不是百分比），那很好。如果我禁用從每個CSS源應用的每個樣式（可以在控制檯樣式選項卡中找到），則問題不是固定的，沒有設置寬度-3px。

所以我必須設置所有的列像素寬度，否則不使用表：固定寬度。