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

Question

我有一个似乎与Chrome隔离的问题...这通常不是它的方式.但是,我已经在下面的plunkr中尽可能地重新创建了这个问题.

为了说明问题,这里有一个图像,显示Chrome中突出显示的行中的边框以及它在IE中的显示方式.

Chrome显示不应存在的边框

如果您删除以下任一行:

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

您将看到相关的边框显示/隐藏.

我们已经对此进行了大量测试,无法隔离问题.主要css保留在plunkr中,包括内联样式和类,它们主要是相关绑定的副产品.

我想知道当前设计中是否存在错误,或者这确实是Chrome中的错误.如果它是一个bug,那么重新创建它需要什么最不常见的元素？是否值得提交为一个bug或者这只是一个我们应该尽量避免的场景.

感谢您提前的时间.

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-style:hidden 具有更高的优先级，并且会隐藏所有边框（不好）

移除垫片中的 colspan

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

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