Делает “отображение:маркер” работает во всех текущих браузерах, и если да, то как?

StackOverflow https://stackoverflow.com/questions/50170

  •  09-06-2019
  •  | 
  •  

Вопрос

Я не могу быть уверен, то ли мой код отстойный, то ли дело просто в том, что браузеры еще не догнали спецификацию.

Моя цель - имитировать маркеры списка, используя сгенерированный контент, чтобы получить, напримерпродолжение работы счетчиков от списка к списку в чистом CSS.

Итак, приведенный ниже код, который я подумай является правильным в соответствии с спецификация, выглядит примерно так:

html {
  counter-reset: myCounter;
}
li {
  counter-increment: myCounter;
}
li:before {
  content: counter(myCounter)". ";
  display: marker;
  width: 5em;
  text-align: right;
  marker-offset: 1em;
}
<ol>
  <li>The<li>
  <li>quick</li>
  <li>brown</li>
</ol>
<ol>
  <li>fox</li>
  <li>jumped</li>
  <li>over</li>
</ol>

Но, похоже, это не генерирует маркеры ни в FF3, ни в Chrome, ни в IE8 beta 2, и, если я правильно помню, Opera тоже не работает (хотя с тех пор я удалил Opera).

Итак, кто-нибудь знает, являются ли маркеры предполагаемый работать?Quirksmode.org не проявляет обычной услужливости в этом отношении :(.

Это было полезно?

Решение

По-видимому, маркер был введен как значение в CSS 2, но не попал в CSS 2.1 из-за отсутствия поддержки браузера.Я полагаю, это не способствовало его популярности …

Источник: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display (Немецкий)

Другие советы

Ой-ой, не знал этого :-|.Тогда это, вероятно, закрывает дело.Потому что в основном я исходил из предположения, что такое базовое свойство CSS2 определенно должно поддерживаться в современных браузерах, но если оно не попало в CSS 2.1, то гораздо логичнее, что это не так.

Для справки в будущем, он не отображается в Центре разработки Mozilla, так что, предположительно, Firefox вообще его не поддерживает.

Также для дальнейшего использования я получил свой оригинальный пример для работы inline-block вместо этого:

li:before
{
    content: counter(myCounter)". ";
    display: inline-block;
    width: 2em;
    padding-right: 0.3em;
    text-align: right;
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top