6

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

结果应该是这样的，因为它适用于 Firefox 和 IE：

期望的结果，Firefox 和 IE

这是在 Chrome 和 Safari 中

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;
}
4

3 回答 3

5

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

第 2 行的第 2 个单元格有实心底边框，第 3 行的第 2 个单元格没有顶边框。当边界崩溃时，固体不会获胜。但是这些单元格只是部分相邻，因为它们跨越不同的列。浏览器对此的处理方式不同。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>
于 2013-03-15T22:20:46.240 回答
1

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

于 2015-05-13T05:10:41.793 回答
0

我玩了你的 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
}

由于这是一个 hack，随着您的图表变得复杂，它可能无法正常工作，但希望这在短期内有所帮助。

于 2013-03-15T08:54:19.520 回答