Chrome 的 colspan 和 border 错误？

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

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>

这是例子作为小提琴 http://jsfiddle.net/5366whmf/.

铬屏幕截图

这似乎是同一个错误此处列出 https://code.google.com/p/chromium/issues/detail?id=356132（或类似）

一个简单的解决方法位于此答案的底部。

这是该错误报告下的相关评论： https://code.google.com/p/chromium/issues/detail?id=356132

这是我们的表代码中的一个已知（旧）问题。折叠边界是 根据相邻单元格确定，我们的代码无法正确处理 具有跨越单元格（我们只考虑与第一行相邻的单元格 / 行/列跨度中的列）。最重要的是，我们的边界 粒度由单元的跨度决定。

为了修复这个错误，我们需要彻底修改我们的折叠边框代码， 这是一项艰巨的任务。

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

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

这是边界冲突的规则 http://www.w3.org/TR/CSS2/tables.html#border-conflict-resolution:

规则一：不要谈论边界冲突

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

1. 具有“隐藏”“边界样式”的边界优先于所有其他冲突边界。具有此值的任何边框都会抑制此位置的所有边框。

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

3. 如果没有一种样式是“隐藏”的，并且至少其中一种不是“无”的，那么窄边框将被丢弃，转而使用较宽的边框。如果几个具有相同的“边框宽度”，则按以下顺序首选样式：“双”、“实心”、“虚线”、“点”、“脊”、“开始”、“凹槽”和最低的： “插图”。

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
}