2009-03-02 24 views
5

Estoy intentando averiguar cómo crear una lista ordenada en aumento actualmente dirigida hacia IE6 e IE7.¿Anida los elementos de la lista dentro de los elementos de lista de una lista ordenada?

E.G. Se debe hacer algo, como a continuación:

1.0 
    1.1 
    1.2 
    1.3 
2.0 
    2.1 
    2.2 

Por lo que entiendo, esto es posible crear en CSS con algo como esto:

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

Sin embargo, por supuesto, IE6 y IE7 no son compatibles esta.

¿Qué opciones hay disponibles para crear una lista incremental adecuada en IE6/7? ¿Estoy atascado teniendo que codificar esto? Desafortunadamente, usar JavaScript no es una opción.

¿Hay alguna metodología actualizada para los navegadores más nuevos?

+0

O por cierto, gracias a Andrew por el arreglo de formato. –

Respuesta

0

Si javascript no es una opción (y por lo tanto también asumo que no hay flash), lamento decir que no tiene opciones para una solución del lado del cliente. Si tiene un script del lado del servidor que está generando su HTML, puede enviar el pedido al servidor y simplemente modificar el estilo del resultado en el cliente usando CSS como una lista desordenada sin bala. IE6 es su factor limitante aquí, y no hay muchas formas de evitarlo. Lamento ser el portador de malas noticias.

0

Si JavaScript no es una opción, tendrá que codificarlo/implementarlo en el lado del servidor.

El lado positivo es: funcionará para otros agentes/dispositivos de usuario menos capaces (piense en el navegador BlackBerry, etc.) de inmediato.

1

XSLT (incluido XSLT 1.0) puede generar secuencias de numeración de varios niveles con <xsl:number>.

+0

Esto parece una posibilidad ya que el resultado final es XHTML 1.0 estricto. Gracias a todos por las respuestas rápidas. Cualquier otra sugerencia será más que felizmente considerada. –

1

Aquí es un CSS única solución (debería funcionar en IE8 y superior):

<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; 
} 
Cuestiones relacionadas