在FF和Webkit

邊境崩潰的差異我有以下規則表：在FF和Webkit

<table cellspacing="0" cellpadding="0" style="table-layout:fixed; 
width:1000px;border-collapse:collapse;border-spacing:0">

並且細胞具有以下CSS：

td{ 
padding:4px; 
height:22px; 
border:1px solid gray; 
}

我的表格單元格的計算樣式看起來像在FF中的以下內容：

padding-top 4px 
padding-right 4px 
padding-bottom 4px 
padding-left 4px 
border-top-width 0 
border-right-width 1px 
border-bottom-width 1px 
border-left-width 0

而在webkit上，它看起來像這樣：

padding-bottom: 4px; 
padding-left: 4px; 
padding-right: 4px; 
padding-top: 4px; 
border-bottom-width: 1px; 
border-left-width: 1px; 
border-right-width: 1px; 
border-top-width: 1px;

出於某種原因，有以下兩個性質的區別：

border-top-width 
border-left-width

這是一個已知的問題？任何可能的解決方案？

來源

2010-04-16 Rajat

好對象，可能是一個錯誤的Firebug的 – vinhboy 2010-04-17 04:00:22

細胞得到正確的顯示（見http://www.martin-thoma.de/ stackoverflow/table-ff-problem.html - 像在Firefox 3.6中一樣在Chrome 8中查找）。問題在哪裏，如果它顯示得像它應該？ – 2011-02-06 12:15:25

你所看到的是Firefox和Chrome如何對待border-collapse的區別。雖然這兩種瀏覽器都能正確呈現所需的結果，但其計算方法略有不同。

火狐讀取它正是如此：

的<table>本身border-top-width: 1px和border-left-width: 1px
每個包含<td>有border-right-width: 1px和border-bottom-width: 1px

瀏覽器讀取每個<td>具有它自己的邊境一路周圍。

從本質上講，當它看到border-collapse時，Firefox會修改每個單元格的屬性以刪除邊框 - 而Chrome會保留這些值並僅覆蓋每個邊框。效果是一樣的，只是在<td>級別有不同的值。在這兩種瀏覽器中，<td>的邊框將位於其之前的<td>的頂部（上方或左側）。

來源

2011-02-08 21:18:14 derrylwc

Derrylwc，這不完全正確 - 效果是不一樣的。 Firefox在上方單元格的底部（用於邊框頂部）和1px到右側單元格（用於邊框右側）或表格（如果頂部或左側沒有單元格）上添加1px邊框。

雖然這可能不是僅在頁面加載時呈現的表格，但對於動態更改表格（如隱藏/顯示具有邊框的行），這是顯而易見的，因爲它會更改上方單元格的高度或單元格的寬度向左-1px（由於td的高度和寬度的計算方式），因此會引起原始的顯着調整大小。

應該有一個計算這些的標準方式，不幸的是，對於動態表，firefox方法並沒有真正的工作。它呈現border-collapse選項無用。

爲了克服這些，刪除邊框崩潰，並添加邊框間距：0

來源

2011-03-24 10:57:00 Matt

回答

相關問題