html – 边框折叠和colspan的奇怪行为

我正在尝试用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：

我的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;
}
最佳答案
这些问题似乎是由浏览器中折叠边界模型的不同解释引起的. border conflict resolution是根据单元而不是槽来定义的,当你使用colspan = 3时,一个单元跨越3个槽.

第2行的第2单元格具有实心的下边框,第3行的第2单元格没有上边框.当边界崩溃时,固体不会赢.但是细胞只是部分相邻,因为它们跨越不同的列.浏览器以不同的方式处理. Chrome使边框跨越上部单元格的所有列,而Firefox使边框只跨越一列,即单元格共享的列 – 这更合理,但CSS 2.1似乎使问题保持??开放.
我尝试使用border：hidden,这有助于Chrome,但会导致Opera出现新问题.
似乎有两种选择.如果他们完成这项工作,您可以使用HTML属性.尽管在HTML5 CR中声明已过时且禁止使用,但同一文档还需要在浏览器中继续支持它们.
但是更清洁,也许更强大的方法是通过添加更多空单元来避免这个问题.这意味着将两个第三行单元划分为两个单元,以便它们中只有一个与第二行的单元共享边界.这使得表格更像网格,但实际上并不复杂：

（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!