Работает ли «display: marker» в любых текущих браузерах, и если да, то как? - PullRequest
2 голосов
/ 08 сентября 2008

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

Моя цель - смоделировать маркеры списка, используя сгенерированный контент, чтобы получить, например, продолжение счетчиков от списка к списку в чистом 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 не является обычным полезным помощником в этом отношении: (.

Ответы [ 2 ]

3 голосов
/ 08 сентября 2008

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

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

1 голос
/ 08 сентября 2008

Ой, не знал, что: - |. Это, вероятно, запечатлеть его дело. Потому что в основном я исходил из того, что такое базовое свойство 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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...