我正在尝试用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：
ottom">ottom">
我的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中声明已过时且禁止使用,但同一文档还需要在浏览器中继续支持它们.
但是更清洁,也许更强大的方法是通过添加更多空单元来避免这个问题.这意味着将两个第三行单元划分为两个单元,以便它们中只有一个与第二行的单元共享边界.这使得表格更像网格,但实际上并不复杂：
ottom">ottom">ottom" >ottom" >
相关文章
准备:导入ElementUI 看官网教程 数据准备:JSON数据转换成树状...
vue阻止冒泡事件 阻止点击事件的执行 <div @click=&a...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
