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

Question

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

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

如果您删除以下任一行：

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

您将看到关联的边框 shows/hides。

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

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

提前感谢您的时间。

Answer 1

一些与 tr.spacer 有关的故障。

解决方法是在 tr.spacer 中将 colspan=7 设置为 td。

Answer 2

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

总结：

如果 table 有 border-collapse

并且单元格是 colspaning

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

修复它的可能性：

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

删除垫片中的 colspan

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

Answer 3

因为这似乎是 Chrome 的一个错误——而不是使用 colspan，您可以写出完成该行所需的剩余单元格，并确保它们没有 class 包含边框。

这个：

<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="3" class="no-border">&nbsp;</td></tr>

会变成：

<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="2" class="no-border">&nbsp</td><td class="no-border">&nbsp;</td></tr>

我不得不使用 border-collapse，但遇到了同样的问题。这个简单的 HTML 标记更改对我有用。

Answer 4

这个问题在我脑海中萦绕了好几天之后，终于找到了一个超级 hacky 的解决方案。将边框颜色设置为与背景颜色相同。

td {
  border: 1px solid (background color);
}

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

Erroneous table border displays in Chrome only Confirmed Bug

html

css

internet-explorer

google-chrome

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

Erroneous table border displays in Chrome only **Confirmed Bug**

html

css

internet-explorer

google-chrome

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

Erroneous table border displays in Chrome only Confirmed Bug