Sorgen Sie dafür, dass die Position von li::marker in WebKit mit anderen Browsern übereinstimmt ⇐ CSS

[Anonymous]

Nehmen Sie den folgenden HTML-Code ohne CSS:

Code: Select all

[list]
[*]one
[*]two
[*]three
[/list]

Beachten Sie, dass zwischen der Spalte „1“, „2“ und „3“ eine Lücke besteht. und die Spalte „eins“, „zwei“ und „drei“. Chrome und Safari dimensionieren diese Lücke unterschiedlich. Es kann auch andere browserübergreifende Unterschiede geben. Wie kann ich die Größe dieser Lücke konsistent machen?
Ich suche speziell nach einer Lösung, die ::marker verwendet, anstatt native Markierungen zu entfernen und sie dann mit ::before neu zu erstellen, um maximale Kompatibilität mit anderem CSS zu gewährleisten.
Um den Unterschied zu demonstrieren, nehmen Sie diese Demo mit derselben Schriftart (Roboto) und einem einheitlichen Hintergrund mit Streifen zum einfacheren Vergleich:

Code: Select all

document.write(navigator.userAgent)

Code: Select all

@import "https://fonts.googleapis.com/css2?family=Roboto";

ol {
font-family: Roboto;
font-size: 30px;
width: 110px;
background-image: repeating-linear-gradient(to right, canvastext 0 1px, mark 0 29px, canvastext 0 30px, canvas 0 59px)
}

Code: Select all

[list]
[*]one
[*]two
[*]three
[/list]

Visuelle Ergebnisse sind wie folgt:



Browser(*)
Screenshot




AppleWebKit/605.1.15





Firefox/146





Chrome/142






(*): relevanter Teil der gemeldeten UA-Zeichenfolge.
Beachten Sie, dass die scheinbare linke Ausrichtung der WebKit-Markierungen ein Zufall ist, der sich aus der Schriftgröße ergibt. Alle Markierungen sind relativ zum Anfang des Inhalts (z. B. „eins“) positioniert.