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>

以下是示例as a fiddle。

Chrome屏幕截图

Answer 1

这似乎是同一个错误listed here（或类似的）

这个答案的底部有一个简单的解决方法。

This is a relevant comment under that bug report:

  

这是我们的表格代码中已知（旧）的问题。折叠边界是   基于相邻单元格确定，我们的代码处理不正确   使用跨越单元格（我们只考虑邻接第一行的单元格   行/列跨度中的/列）。最重要的是，我们的边界   粒度由单元格的跨度决定。

     

要修复此错误，我们需要彻底检查崩溃的边界代码，   这是一项艰巨的任务。

以下是一个突出显示相同问题的示例：

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中拍摄）：

Here are the rules of border conflicts：

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

  

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

     

  

1. 'hidden'的'border-style'边框优先于所有其他冲突的边框。具有此值的任何边框都会抑制此位置的所有边框。

  

2. 样式为“none”的边框优先级最低。仅当在此边缘处遇到的所有元素的边界属性为“无”时，才会省略边框（但请注意，“无”是边框样式的默认值。）

  

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>