Html 带有colspan和border的Chrome bug？

在下面的示例中，右单元格顶部有一个边框。它只出现在Chrome中，是Chrome bug吗

HTML/CSS

html，
身体{
身高：100%；
}
桌子{
边界塌陷：塌陷；
宽度：100%；
身高：100%；
}
.左{
右边框：1px#AAAAA实心；
边框顶部：1px#AAAAA实心；
}

顶部
左边
正确的

这似乎是同一个bug（或类似的bug）

这个答案的底部是一个简单的解决方法

这是表代码中的一个已知（旧）问题。崩溃的边界正在消失 根据相邻单元格确定，我们的代码处理不正确 与跨越单元（我们只考虑邻接第一行的单元） /行/列跨度中的列）。最重要的是，我们的边界 粒度由单元的跨度决定

要修复这个错误，我们需要彻底检查正在崩溃的边界代码， 这是一项大事业

下面是一个突出显示相同问题的示例：

html，
身体{
身高：100%；
}
桌子{
边界塌陷：塌陷；
宽度：100%；
身高：100%；
}
.左{
右边框：1px#AAAAA实心；
边框顶部：1px#AAAAA实心；
}
.对{
边框顶部：双20px#F00；
}

顶部
左边
正确的

因为它是一个Chrome Bug，让我们想出一个解决办法。到目前为止，我只提出了一个涉及更改html的方法：

它添加了另一行：

<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>

顶部
左右

最简单的解决方案是使用

边框折叠：分离

（默认设置），因为错误与折叠边框有关，然后根据需要放置边框。就像是的，边界崩溃是问题的根源。因此，如果您不使用它，就不需要任何变通方法。如果您将边框设置为这样（边框顶部：3px#aaaaaa#），它看起来更容易出错。请看一看：顺便说一句，这几乎是该漏洞的周年纪念日，但问题没有解决。这个谷歌Chrome漏洞至今仍在复制，使用最新的Chrome版本72.0.3626.121（官方版本）（64位）是迄今为止最好的答案。我只是希望Google能够解决自2012年以来一直存在的问题。对于那些无法或不愿意在所有表或td上应用此css的人，我通过以下操作解决了这个问题：.griditem td:last child{border collapse:separate；border spacing:0；border right:1px solid；}其中.griditem是。