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

发布时间:2020-08-11 整理:编程之家
编程之家收集整理的这篇文章主要介绍了html – 仅在Chrome中显示错误的表格边框**已确认错误**编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随编程之家小编过来看看吧!
我有一个似乎与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中,包括内联样式和类,它们主要是相关绑定的副产品.

我想知道当前设计中是否存在错误,或者这确实是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中显示错误的表格边框**已确认错误**全部内容,希望文章能够帮你解决html – 仅在Chrome中显示错误的表格边框**已确认错误**所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!