边界崩溃和colspan的奇怪行为

Question

我正在尝试用HTML制作组织结构图.代码相当简单,但我在Chrome/Safari和Opera中渲染时遇到了一些问题.

这是结果应该是什么样的,因为它适用于Firefox和IE:

这是Chrome和Safari

这是在Opera:

问题来自border-collapse: collapseCSS中的属性.如果我使用旧的编码风格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

这些问题似乎是由浏览器中折叠边框模型的不同解释引起的。该边界冲突解决在细胞中，而不是槽来定义，而当你使用colspan=3，一个单元格跨越3个插槽。

第 2 行的第 2 个单元格具有实心底边框，第 3 行的第 2 个单元格没有顶边框。当边界崩溃时，solid 不会赢。但是这些单元格只是部分相邻，因为它们跨越不同的列。浏览器的处理方式不同。Chrome 使边框跨越上部单元格的所有列，而 Firefox 使边框仅跨越一列，即单元格共享的一列——这更合理，但 CSS 2.1 似乎让这个问题悬而未决。

我尝试使用border: hidden，这对 Chrome 有帮助，但在 Opera 上会导致新问题。

似乎有两种选择。您可以使用 HTML 属性，如果它们可以完成工作。尽管在 HTML5 CR 中被宣布为过时和禁止，同一文档也需要在浏览器中继续支持它们。

但更简洁、或许更健壮的方法是通过添加更多空单元格来避免这个问题。这意味着将两个第 3 行的单元格分成两个单元格，以便其中只有一个与第 2 行的单元格共享边界。这使得表格更像网格，但本质上并不复杂：

<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>