table邊框重疊導致的儲存格邊框寬度問題，table邊框

table邊框重疊導致的儲存格邊框寬度問題，table邊框

偶然的看了一眼別人寫的CSS，在注釋中，說有table元素邊框摺疊(塌陷、重疊，那個詞合適？)時，不同瀏覽器對儲存格邊框的計算是不一樣的，然後還在注釋中寫了連結地址Border Collapse differences in FF and Webkit；對於死心眼的技術男來說，不探究一番究竟，還真睡不著覺了。

憤然開啟網址（每次都很激憤，經常由於各種原因開啟的巨慢），理清了思路，原來大體意思是說：雖然他們處理的不一樣，但最後呈現出來的介面都是一樣的。然後我慢慢的思考下，好像就是 Firefox 把 collapse 按照“塌陷”的意思處理的，webkit 是按照“重疊（或者說摺疊）”的意思處理的。

如此說來，那個英文標題翻譯起來，還真不好翻譯。該如何翻譯呢，FF 和 webkit 處理邊框重疊時的差別？拜託，webkit 就是按照重疊來呈現的；而如果翻譯成“塌陷”，firefox 就是按照塌陷來呈現的。突然軟體專利上的一個現象：不保護思想，只保護表達。

頁面的 css 布局如下：

table {    table-layout: fixed;    width: 960px;    border-collapse: collapse;    border-spacing: 0;}td {    padding: 2px;    height: 22px;    border: 1px solid gray;}

然後附上簡單的 HTML 測試代碼：

<table>    <tbody>    <tr>        <td>I'm td1</td>        <td id="td2">            I'm td2        </td>    </tr>    </tbody></table>

最後使用 getComputedStyle(td2).borderLeftWidth 計算出來的結果還真是不一樣，webkit 下面是 1px，firefox 下面是 0px，而 IE 只能使用 td2.curretStyle.borderLeftWidth，結果是和 webkit 一致的。如此看來，應該是 webkit 和 IE 走到是同一條路線，好基友，肯定有一腿。

瑣碎了這麼多，一張圖，瞬間秒懂。

--------------------------------------------

無聊的時候，就用代碼慰藉一下；