大家好。我们已开始将论坛从专有的 Xenforo 迁移到开源的 Discourse,在复制旧论坛视觉效果的过程中,我遇到了一个 Chrome 特定的 CSS 问题。
我不知道是否还有其他人遇到过这个问题,在这里我找不到任何其他关于此问题的论坛主题。
我尝试在所有表格上实现渐变,这里指的是分类列表和主题列表。
在 Firefox 上,它看起来应该有的样子:
截图
![]()
但基于 Chromium 的浏览器似乎会渲染一个额外的边框:
截图
![]()
这是相关的 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 选择器/规则集,将非常感谢您的帮助。