邊界崩潰和colspan的奇怪行爲

Question

我想在HTML中製作組織結構圖。代碼非常簡單，但我在Chrome/Safari和Opera中呈現出一些問題。

下面是結果應該是什麼樣子的，因爲它在Firefox和IE：

這裏是Chrome和Safari

這裏是在Opera ：

問題來自CSS中的border-collapse: collapse屬性。如果我使用舊的編碼風格cellspacing="0" cellpadding="0"它或多或少工作，但在HTML5中無效。

我創建了一個的jsfiddle，藉以說明問題：http://jsfiddle.net/aGVp4/7/

我的HTML：

<table cellspacing="0" cellpadding="0"> 
    <tr> 
     <td colspan="3"></td> 
     <td colspan="2" class="case"></td> 
     <td colspan="3"></td> 
    </tr> 
    <tr> 
     <td colspan="3"></td> 
     <td colspan="2" class="case"></td> 
     <td colspan="3"></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td colspan="3" class="right bottom"></td> 
     <td colspan="3" class="bottom"></td> 
     <td></td> 
    </tr> 
    <tr> <!-- No colspan here, to make the layout symmetrical --> 
     <td class="right"></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td class="right"></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td colspan="2" class="case"></td> 
     <td colspan="4"></td> 
     <td colspan="2" class="case"></td> 
    </tr> 
</table> 

我的CSS：

.orgchart { 
    border-spacing: 0; 
    border-collapse: collapse; 
} 

td { 
    width: 3em; 
    height: 1em; 
} 

td.case { 
    border: 1px solid black; 
} 

td.right { 
    border-right: 1px solid black; 
} 

td.bottom { 
    border-bottom: 1px solid black; 
} 

td.top { 
    border-top: 1px solid black; 
} 

Answer 1

這些問題似乎是由瀏覽器中摺疊邊框模型的不同解釋引起的。 border conflict resolution是根據單元定義的，而不是槽，當您使用colspan=3時，一個單元跨越3個槽。

第2行的第2個單元格有一個堅實的底部邊框，第3行的第2個單元格沒有頂部邊框。當邊界崩潰時，固體不會贏。但是細胞只是部分相鄰，因爲它們跨越不同的列。瀏覽器以不同的方式處理。 Chrome使邊界跨越了上層單元格的所有列，而Firefox使得邊界僅跨越一列，即單元格共享的那一列 - 這更合理，但CSS 2.1似乎將問題留給開放。

我試着玩border: hidden，這對Chrome有幫助，但在Opera上引發了新的問題。

看來有兩種選擇。如果他們完成這項工作，你可以使用HTML屬性。雖然在HTML5 CR中聲明已經過時並被禁止，但同一文檔也需要在瀏覽器中繼續支持它們。

但是更清潔，也許更健壯的方法是通過添加更多空單元來避免該問題。這意味着將兩個第三行單元劃分爲兩個單元，以便它們中只有一個與第二行的單元共享邊界。這使得表格更加網格狀，但沒有本質的更復雜：

<table class="orgchart"> 
<tr> 
    <td colspan="3"></td> 
    <td colspan="2" class="case"></td> 
    <td colspan="3"></td> 
</tr> 
<tr> 
    <td colspan="3"></td> 
    <td colspan="2" class="case" ></td> 
    <td colspan="3"></td> 
</tr> 
<tr> 
    <td></td> 
    <td colspan="2" class="bottom"></td> 
    <td class="right bottom"></td> 
    <td class="bottom" ></td> 
    <td colspan="2" class="bottom" ></td> 
    <td></td> 
</tr> 
<tr> <!-- No colspan here, to make the layout symmetrical --> 
    <td class="right"></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td class="right"></td> 
    <td></td> 
</tr> 
<tr> 
    <td colspan="2" class="case"></td> 
    <td colspan="4"></td> 
    <td colspan="2" class="case"></td> 
</tr> 
</table> 

Answer 2

我打你的jsfiddle，並發現了一個劈在Chrome和Safari中解決問題。

也適用於FF和IE，但沒有在Opera上測試。

試試這個（jsfiddle）：

td.bottom { 
    border-top: 1px solid white; // this is the hack 
    border-bottom: 1px solid black; 
} 
td.right.bottom { 
    border-top: none; // fix for IE 
} 

由於這是一個黑客，爲您的圖表增長複雜，可能無法正常工作，但希望這有助於在短期內。

Answer 3

添加一個新的空行<tr></tr>的合併單元格將解決這個問題（不是一個漂亮的解決方案，但工程）下。