Работает ли «display: marker» в любых текущих браузерах, и если да, то как?

Question

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

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

Итак ниже код, который я думаю, что правильно в соответствии с the spec, как это:

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 не является его обычным полезным я в этом отношении :(

Answer 1

Очевидно, маркер был введен как значение в CSS 2, но не попал в CSS 2.1 из-за отсутствия поддержки браузера. Я полагаю, что didn «т помочь своей популярности ...

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

Answer 2

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

Для справок в будущем он не отображается in the Mozilla Development Center, поэтому предположительно Firefox его не поддерживает.

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

li:before 
{ 
    content: counter(myCounter)". "; 
    display: inline-block; 
    width: 2em; 
    padding-right: 0.3em; 
    text-align: right; 
}