colspan和边境的Chrome bug？

Question

在下面的示例中,右侧单元格顶部有一个边框.它只出现在Chrome中,是Chrome出错吗？

HTML/CSS

html,
body {
  height: 100%;
}
table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}
.left {
  border-right: 1px #aaaaaa solid;
  border-top: 1px #aaaaaa solid;
}

<table>
  <tr>
    <td colspan=2>top</td>
  </tr>
  <tr>
    <td class="left">left</td>
    <td>right</td>
  </tr>
</table>

这是一个小提琴的例子.

Chrome屏幕截图

Answer 1

这似乎与此处列出的相同错误(或类似)

一个简单的解决方法是在这个答案的底部.

这是该错误报告下的相关评论:

这是我们的表代码中已知(旧)的问题.折叠边框是基于相邻单元格确定的,并且我们的代码不能正确处理生成单元格(我们只考虑与行/列跨度中的第一行/列相邻的单元格).最重要的是,我们的边界粒度由单元格的跨度决定.

要解决这个问题,我们需要彻底检查崩溃的边界代码,这是一项艰巨的任务.

这是一个突出显示相同问题的示例:

html,
body {
  height: 100%;
}
table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}
.left {
  border-right: 1px #aaaaaa solid;
  border-top: 1px #aaaaaa solid;
}
.right {
  border-top: double 20px #F00;
}

<table>
  <tr>
    <td colspan=2>top</td>
  </tr>
  <tr>
    <td class="left">left</td>
    <td class="right">right</td>
  </tr>
</table>

我补充说:

.right { border-top: double 20px #F00; }

Chrome中的结果如下:

如果它不是一个错误,那个灰色边框不会在双红色边框之间.

为了比较,它应该是它的外观(在Firefox中使用):

以下是边界冲突的规则:

规则1:你不谈论边界冲突

以下规则确定在发生冲突时哪种边框样式"获胜":

1. 具有"隐藏"边界风格的边界优先于所有其他冲突边界.具有此值的任何边框都会抑制此位置的所有边框.

2. 风格为"无"的边框优先级最低.仅当在此边缘处遇到的所有元素的边界属性为"无"时,才会省略边框(但请注意,"无"是边框样式的默认值.)

3. 如果没有一个样式是"隐藏的"并且其中至少有一个不是"无",那么将丢弃窄边框以支持更宽的样式.如果有几个具有相同的'border-width',则按此顺序首选样式:'double','solid','dashed','dotted','ridge','outset','groove'和最低: "插页".

4. 如果边框样式仅在颜色上有所不同,那么在单元格上设置的样式将赢得一行中的一个样式,该样式将胜过行组,列,列组,最后是表格.当两个相同类型的元素发生冲突时,那么左边的那个元素(如果表格的'方向'是'ltr';右边,如果它是'rtl')则进一步向前赢.

解决方法

这是一个解决方法,只是不要使用border-collapse: collapse:

table {
  border-collapse: separate; /* the default option */
  border-spacing: 0; /* remove border gaps */
}
td {
  padding: 20px;
  border-right: solid 1px #CCC;
  border-bottom: solid 1px #CCC;
}
td:first-child {
  border-left: solid 1px #CCC;
}
table {
  border-top: solid 1px #CCC
}

<table>
  <tr>
    <td colspan="3"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

table {
  border-collapse: separate; /* the default option */
  border-spacing: 0; /* remove border gaps */
}
td {
  padding: 20px;
  border-right: solid 1px #CCC;
  border-bottom: solid 1px #CCC;
}
td:first-child {
  border-left: solid 1px #CCC;
}
table {
  border-top: solid 1px #CCC
}

Answer 2

由于它是Chrome-Bug，我们来考虑一种解决方法。到目前为止，我只想出了一个涉及更改html的方法：

http://jsfiddle.net/5366whmf/24/

它添加了另一行：

<table style="border-collapse: collapse">
 <tr><td colspan=2>top</td></tr>
 <tr><td style="height: 0"></td></tr> <!-- fix for chrome -->
 <tr><td style="border-top: 1px solid red">left</td><td>right</td></tr>
</table>