Imbrication d'éléments de liste dans les éléments de liste d'une liste ordonnée?

Question

J'essaie de comprendre comment créer une liste ordonnée incrémentée actuellement orientée vers IE6 et IE7.

E.G. Il devrait rendre quelque chose comme ci-dessous:

1.0 
    1.1 
    1.2 
    1.3 
2.0 
    2.1 
    2.2 

D'après ce que je comprends, cela est possible de créer en CSS avec quelque chose comme ceci:

UL, OL { counter-reset: item; } 
LI { display: block } 
LI:before { content: counters(item, "."); counter-increment: item } 

Cependant, bien sûr, IE6 et IE7 ne prennent pas en charge ce.

Quelles sont les options disponibles pour créer une liste incrémentée appropriée dans IE6/7? Suis-je obligé d'avoir à coder dur ceci? Malheureusement, l'utilisation de JavaScript n'est pas une option.

Existe-t-il des méthodologies mises à jour pour les nouveaux navigateurs?

Answer 1

Si le javascript n'est pas une option (et donc je suppose également pas flash), je suis désolé de dire que vous n'avez plus d'options pour une solution côté client. Si vous avez un script côté serveur qui génère votre code HTML, vous pouvez passer la commande au serveur et simplement styler la sortie sur le client en utilisant CSS comme une liste non ordonnée sans balle. IE6 est votre facteur limitant ici, et il n'y a pas beaucoup de façons de contourner cela. Désolé d'être le porteur de mauvaises nouvelles.

Answer 2

Si JavaScript n'est pas une option, vous devrez le coder en dur/l'implémenter côté serveur. Le côté positif est: Cela fonctionnera pour d'autres agents/appareils utilisateurs moins performants (pensez à BlackBerry Browser, etc.) tout de suite. XSLT (y compris XSLT 1.0) peut générer des séquences de numérotation multiniveaux avec <xsl:number>

Answer 3

Answer 4

Voici une CSS seule solution (devrait fonctionner dans IE8 et au-dessus):

<ol> 
    <li> 
     Heading 
     <ol> 
      <li>list</li> 
      <li>list</li> 
     </ol> 
    </li> 
    <li> 
     Heading 
     <ol> 
      <li>list</li> 
      <li>list</li> 
     </ol> 
    </li> 
</ol> 



ol{ 
    list-style-position:inside; 
    list-style-type: none; 
    counter-reset:mainNum; 
} 

ol li:before{ 
    content: counter(mainNum) ".0"; 
    counter-increment:mainNum; 
} 

ol ol{ 
    counter-reset:item; 
} 

ol ol li{ 
    list-style-type:none 
} 

ol ol li:before{ 
    content: counter(mainNum) "." counter(item) " "; 
    counter-increment:item; 
}