Сделайте положение li::marker в WebKit согласованным с другими браузерами. ⇐ Html

[Anonymous]

Возьмите следующий HTML-код без CSS:

Код: Выделить всё

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

Обратите внимание, что между столбцами «1», «2» и «3» есть пробел. и столбец «один», «два» и «три». Chrome и Safari по-разному определяют этот разрыв; могут быть и другие межбраузерные различия. Как мне сделать размер этого разрыва одинаковым?
Я ищу решение, использующее ::marker, а не удаление собственных маркеров и их воссоздание с помощью ::before, для максимальной совместимости с другими CSS.
Чтобы продемонстрировать разницу, возьмите эту демонстрацию с использованием того же шрифта (Roboto) и однородного полосатого фона для облегчения сравнения:

Код: Выделить всё

document.write(navigator.userAgent)

Код: Выделить всё

@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)
}

Код: Выделить всё

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

Визуальные результаты следующие:



Браузер(*)
Снимок экрана




AppleWebKit/605.1.15





Firefox/146





Chrome/142






(*): соответствующая часть сообщаемой строки UA.
Обратите внимание, что кажущееся выравнивание маркеров WebKit по левому краю является совпадением, обусловленным размером шрифта, все маркеры расположены относительно начала содержимого (например, «один»).

Подробнее здесь: https://stackoverflow.com/questions/798 ... r-browsers