Hallo Leute. Wir haben angefangen, unser Forum von proprietärem Xenforo auf Open-Source Discourse umzustellen, und im Zuge der Nachbildung der visuellen Elemente unseres alten Forums bin ich auf ein Chrome-spezifisches CSS-Problem gestoßen.
Ich weiß nicht, ob sonst noch jemand auf dieses Problem gestoßen ist, ich konnte hier keine anderen Forenthemen dazu finden.
Ich habe versucht, einen Farbverlauf auf alles anzuwenden, was eine Tabelle ist, in diesem Fall die Kategorie- und Themenliste.
Unter Firefox sieht es so aus, wie es sollte:
Screenshot
Aber Chromium-basierte Browser scheinen einen zusätzlichen Rand zu rendern:
Screenshot
Und hier ist das fragliche CSS (am Beispiel der Kategorie-Liste innerhalb einer Kategorie):
Code
#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;
}
Wenn ich background-color verwende, rendern beide Browser die <th> identisch, d.h. ohne den zusätzlichen überlagerten Rand.
Ich konnte dieses Problem mit reinem HTML+CSS, Codepen oder ähnlichen Tools nicht reproduzieren. Wenn Sie sich mit dem DOM und den CSS-Selektoren/Regelsätzen von Discourse auskennen, wäre Ihre Hilfe sehr willkommen.