Question

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

结果应如下所示，因为它适用于Firefox和IE：

Desired result, Firefox and IE

以下是Chrome和Safari

Chrome and Safari

这是在Opera：

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

在colspan下添加一个新的空行<tr></tr>将解决此问题（不是一个漂亮的解决方案，但有效）。

边界崩溃和colspan的奇怪行为

3 个答案: