html - 错误的表格边框仅在 Chrome 中显示 **已确认的错误**

Question

我有一个似乎与 Chrome 无关的问题......通常情况并非如此。但是，我在以下 plunkr 中尽可能纯粹地重现了这个问题。

http://plnkr.co/edit/k0viyc

为了说明问题，这里有一张图片在 Chrome 中突出显示的行中显示了边框，而在 IE 中却没有显示。

如果您删除以下任一行:

<tr class="spacer">
  <td colspan="14" class="noBorder noBackground">
    *** By removing this row, the extended border goes away ***
  </td>
</tr>

您将看到关联的边框显示/隐藏。

我们已经对此进行了大量测试，但无法确定问题所在。主要的 css 保留在 plunkr 中，包括内联样式和类，它们主要是相关绑定(bind)的副产品。

我想知道当前的设计是否存在错误，或者这是否真的是 Chrome 中的错误。如果这是一个错误，那么重新创建它所需的最不常见的元素是什么？是否值得作为错误提交，或者这只是我们应该尽量避免的情况。

提前感谢您抽出时间。

Answer 1

看起来像是 Chrome 的错误。

复制它的最小展示

.test {
  border-collapse: collapse;
}

td {
  border: solid 1px blue;
}

.no {
  border: none;
}

<table class="test">
<tr>
<td>one</td>
<td class="no">two</td>
</tr>
<tr>
<td class="no" colspan="2">double</td>
</tr>
</table>

Chromium 跟踪(以某种方式)相关 border rendering bug

有点令人不安的提及

It's a known (old) issue in our table code. Collapsing borders are determined based on adjacent cells and our code doesn't deal correctly with spanning cells (we only consider the cell adjoining the first row / column in a row / column span). On top of that, our border granularity is determined by the cell's span.

To fix this bug, we would need to overhaul our collapsing border code, which is a big undertaking.

总结:

如果表格有border-collapse

并且单元格是colspaning

然后不同的边框设置(对于那个单元格，隐含地)将失败

修复它的可能性:

设置 border-style: hidden 到单元格有更高的优先级，会隐藏所有的边框(不好)

去除间隔物中的 colspan

或者可能完全移除间隔行并在没有它们的情况下处理显示。