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

**URL:** https://meta.discourse.org/t/chromium-table-border-bug-with-gradients/286895
**Category:** Development
**Tags:** css
**Created:** [2023年十一月28日 22:19 UTC](https://meta.discourse.org/t/chromium-table-border-bug-with-gradients/286895 "2023-11-28T22:19:31Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![polyzium](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/polyzium/32/344527_2.png) [@polyzium](https://meta.discourse.org/u/polyzium)
#### Post date: [2023年十一月28日 22:19 UTC](https://meta.discourse.org/t/chromium-table-border-bug-with-gradients/286895/1 "2023-11-28T22:19:31Z")

</div>

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

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

> **截图**
>
> ![image](https://global.discourse-cdn.com/meta/original/4X/2/0/d/20dbb6afb562500a07c0298d944e6a26aa1278d0.png)

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

> **截图**
>
> ![image](https://global.discourse-cdn.com/meta/original/4X/f/6/3/f63a4fcc914b5b7445730f0c82932468b68d1d44.png)

这是相关的 CSS（以分类列表为例）：

> **代码**
>
> ```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 选择器/规则集，将非常感谢您的帮助。

---

<div class="post-metadata">

### Author: ![polyzium](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/polyzium/32/344527_2.png) [@polyzium](https://meta.discourse.org/u/polyzium)
#### Post date: [2023年十一月29日 17:33 UTC](https://meta.discourse.org/t/chromium-table-border-bug-with-gradients/286895/2 "2023-11-29T17:33:07Z")

</div>

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

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [2023年十二月29日 17:33 UTC](https://meta.discourse.org/t/chromium-table-border-bug-with-gradients/286895/3 "2023-12-29T17:33:08Z")

</div>

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