“Visualizza:marker” funzionano in tutti i browser attuali e, se sì, come?

Question

Non posso essere sicuro se il mio codice fa schifo o se è solo che i browser non hanno ancora raggiunto le specifiche.

Il mio obiettivo è simulare i marcatori di elenchi utilizzando il contenuto generato, in modo da ottenere ad es.continuazione dei contatori da una lista all'altra in puro CSS.

Quindi il codice seguente, che I pensare è corretto secondo la specifica, è come questo:

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>

Ma questo non sembra generare marcatori, né in FF3, Chrome o IE8 beta 2, e se ricordo bene nemmeno Opera (anche se da allora ho disinstallato Opera).

Quindi, qualcuno sa se i marcatori lo sono ipotetico lavorare?Quirksmode.org non si comporta come al solito in questo senso :(.

Answer 1

Apparentemente il marcatore è stato introdotto come valore nei CSS 2 ma non è arrivato ai CSS 2.1 a causa della mancanza del supporto del browser.Suppongo che ciò non abbia aiutato la sua popolarità...

Fonte: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display (Tedesco)

Answer 2

Oh ahi, non lo sapevo Sorry.Questo probabilmente sigilla la situazione, quindi.Perché per lo più pensavo che una proprietà CSS2 così basilare dovesse essere sicuramente supportata nei browser moderni, ma se non fosse stata inserita nei CSS 2.1, allora avrebbe molto più senso che non lo fosse.

Per riferimento futuro, non viene visualizzato nel Centro di sviluppo Mozilla, quindi presumibilmente Firefox non lo supporta affatto.

Inoltre, per riferimento futuro, ho utilizzato il mio esempio originale con cui lavorare inline-block Invece:

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