Chromium 表格边框bug(?) 与渐变有关

大家好。我们已开始将论坛从专有的 Xenforo 迁移到开源的 Discourse,在复制旧论坛视觉效果的过程中,我遇到了一个 Chrome 特定的 CSS 问题。
我不知道是否还有其他人遇到过这个问题,在这里我找不到任何其他关于此问题的论坛主题。

我尝试在所有表格上实现渐变,这里指的是分类列表和主题列表。
在 Firefox 上,它看起来应该有的样子:

截图

image

但基于 Chromium 的浏览器似乎会渲染一个额外的边框:

截图

image

这是相关的 CSS(以分类列表为例):

代码
#header-list-area .category-list > thead > tr {
  border-color: #a3a3a3;
  background-image: linear-gradient(to right, #a3a3a3, #424242);
}
.category-list > thead > tr {
  border-width: 0px;
  border-left-width: 6px;
  border-style: solid;
}

如果我使用 background-color,两个浏览器都会以相同的方式渲染 <th>,即没有额外的叠加边框。

我无法在纯 HTML+CSS、codepen 或任何其他类似工具中重现此问题。如果您熟悉 Discourse 的 DOM 和 CSS 选择器/规则集,将非常感谢您的帮助。

我想我已经解决了。\n我不得不将边框应用于 tr \u003e th:first-child 而不是 tr。现在两个浏览器渲染效果相同。\n我完全不知道 tr 标签有什么 bug。可能是一次性的或者别的什么。\n\n这不是一个完美的解决方案,但它看起来效果一样,可以接受。

3 个赞

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.