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

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

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

如果您删除以下任一行：

<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或者这只是一个我们应该尽量避免的场景.

感谢您提前的时间.

解决方法

看起来像是一个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>

铬跟踪(不知何故)相关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.

结论：

如果表格有边框崩溃

并且细胞是colspaning

然后,不同的边框设置(对于该单元格,隐式)将失败

解决问题的可能性：

设置border-style：隐藏到单元格具有更高的优先级并将隐藏所有边框(不好)

去除间隔物中的colspan

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

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

解决方法

相关文章