带有 colspan 和边框的 Chrome 错误？

Question

在下面的示例中，右侧单元格的顶部有一个边框。只出现在 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>

这里是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. 具有“隐藏”的“边框样式”的边框优先于所有其他冲突边框。具有此值的任何边框都会抑制此位置的所有边框。

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

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

4. 如果边框样式仅在颜色上有所不同，则在单元格上设置的样式会胜过在行上设置的样式，后者会胜过行组、列、列组，最后是表格。当同一类型的两个元素发生冲突时，更靠左（如果表格的'direction'是'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 错误，让我们想出一个解决方法。到目前为止，我只想出了一个涉及更改 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>