Chromiumのテーブルボーダーのバグ（グラデーション付き）

開発
1

皆さん、こんにちは。プロプライエタリな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セレクター/ルールセットに詳しい方がいらっしゃいましたら、ご協力いただけると幸いです。

2

解決できたと思います。
trではなくtr > th:first-childにボーダーを適用する必要がありました。これで両方のブラウザで同じように表示されるようになりました。
trタグにあったバグの原因は全く分かりません。一時的なものか、何か別の理由があったのかもしれません。

これはクリーンな解決策ではありませんが、見た目は同じなのでこれで十分でしょう。

「いいね！」 3
3

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