奇怪的行为与边界崩溃和colspan [英] Strange behaviour with border-collapse and colspan
问题描述
我正在尝试制作HTML中的组织结构图。代码非常简单，但我在Chrome / Safari和Opera中呈现时遇到了一些问题。
结果应该如下所示，因为它适用于Firefox和IE：
这里是Chrome和Safari浏览器
这里是在Opera中：
问题来自<$在CSS中c $ c> border-collapse：collapse 属性。如果我使用旧的编码风格 cellspacing =0cellpadding =0它或多或少工作，但在HTML5中无效。
我创建了一个jsFiddle来显示问题： http://jsfiddle.net/ aGVp4 / 7 /
我的HTML：
< table cellspacing =0cellpadding =0>
< tr>
< td colspan =3>< / td>
< td colspan =2class =case>< / td>
< td colspan =3>< / td>
< / tr>
< tr>
< td colspan =3>< / td>
< td colspan =2class =case>< / td>
< td colspan =3>< / td>
< / tr>
< tr>
< td>< / td>
< td colspan =3class =right bottom>< / td>
< td colspan =3class =bottom>< / td>
< td>< / td>
< / tr>
< tr> <！ - 这里没有colspan，为了使布局对称 - >
< td class =right>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td class =right>< / td>
< td>< / td>
< / tr>
< tr>
< td colspan =2class =case>< / td>
< td colspan =4>< / td>
< td colspan =2class =case>< / td>
< / tr>
< / table>
和我的CSS：
.orgchart {
border-spacing：0;
border-collapse：collapse;
}
td {
width：3em;
身高：1em;
}
td.case {
border：1px纯黑色;
}
td.right {
border-right：1px纯黑色;
}
td.bottom {
border-bottom：1px纯黑色;
}
td.top {
border-top：1px纯黑色;
}
通过对浏览器中折叠边框模型的不同解释。 边界冲突解决是根据单元格定义的，不是插槽，并且当您使用 colspan = 3 时，一个单元跨越3个插槽。
第二行有一个坚实的底部边框，并且第三行的第二个单元格没有顶部边框。当边界崩溃时，固体不会赢。但是细胞只是部分相邻，因为它们跨越不同的列。浏览器以不同的方式处理。 Chrome使边界跨越了上层单元格的所有列，而Firefox使得边界仅跨越一列，即单元格共享的那一列 - 这更合理，但CSS 2.1似乎将问题保持开放状态。
我尝试使用 border：hidden 进行游戏，这对Chrome有帮助，但会在Opera上引发新问题。
看来有两种选择。如果他们完成这项工作，你可以使用HTML属性。虽然在HTML5 CR中声明已经过时并且被禁止，但同样的文档也需要在浏览器中继续支持它们。
但是，更清晰，也许更健壮的方法是避免问题通过添加更多的空单元格。这意味着将两个第三行单元划分为两个单元，以便它们中只有一个与第二行的单元共享边界。这使得表格更像网格，但本质上并不复杂：
< table class =orgchart>
< tr>
< td colspan =3>< / td>
< td colspan =2class =case>< / td>
< td colspan =3>< / td>
< / tr>
< tr>
< td colspan =3>< / td>
< td colspan =2class =case>< / td>
< td colspan =3>< / td>
< / tr>
< tr>
< td>< / td>
< td colspan =2class =bottom>< / td>
< td class =right bottom>< / td>
< td class =bottom>< / td>
< td colspan =2class =bottom>< / td>
< td>< / td>
< / tr>
< tr> <！ - 这里没有colspan，为了使布局对称 - >
< td class =right>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td>< / td>
< td class =right>< / td>
< td>< / td>
< / tr>
< tr>
< td colspan =2class =case>< / td>
< td colspan =4>< / td>
< td colspan =2class =case>< / td>
< / tr>
< / table>
I am trying to make an organisational chart in HTML. The code is fairly simple, but I have some problems with the rendering in Chrome/Safari and Opera.
Here is what the result should look like, as it works in Firefox and IE:
Here is in Chrome and Safari
And here is in Opera:
The problem comes from the border-collapse: collapse property in CSS. If I use the old coding style cellspacing="0" cellpadding="0"it works more or less, but is not valid in HTML5.
I created a jsFiddle to show the problem: http://jsfiddle.net/aGVp4/7/
My 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>
And my 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;
}
The problems seems to be caused by different interpretations of the collapsing border model in browsers. The border conflict resolution is defined in terms of cells, not slots, and when you use colspan=3, one cell spans 3 slots.
The 2nd cell of the 2nd row has a solid bottom border, and the 2nd cell of the 3rd row has no top border. When borders collapse, solid wins none. But the cells are only partially adjacent, as they span different columns. Browsers hand this differently. Chrome makes the border span all the columns of the upper cell, whereas Firefox makes the border span only one column, the one that the cells share – which is more reasonable, but CSS 2.1 seems to leave the issue open.
I tried playing with border: hidden, which helps on Chrome but causes new problems on Opera.
It seems that there are two options. You could use the HTML attributes, if they do the job. Though declared obsolete and forbidden in HTML5 CR, the same document also requires continued support to them in browsers.
But a cleaner, and perhaps more robust, approach is to avoid the problem by adding more empty cells. This means dividing two 3rd row cells into two cells so that only one of them shares a border with the cell of the 2nd row. This makes the table even more grid-like, but not essentially more complex:
<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>
这篇关于奇怪的行为与边界崩溃和colspan的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
