Recientes estudios de los laboratorios Choan & co. concluyen que Internet Explorer sigue siendo una caquita de navegador. Hoy, por la siguiente razón:
Internet Explorer no numera correctamente los elementos de las listas ordenadas.
Así, dado el siguiente marcado:
<ol>
<li>Soy un navegador</li>
<li>Soy peculiar</li>
<li>Soy Internet Explorer</li>
</ol>Puede dar un resultado tal que:
1. Soy un navegador 1. Soy peculiar 1. Soy Internet Explorer
Investigando investigando, he llegado a la siguiente conclusión:
El bug solo se reproduce si el elemento de lista tiene hasLayout.
E investigando investigando, he caído en la cuenta de que cuando el li adquiere hasLayout, su display pasa a ser block. Demonios.
En fin, la solución: devolver el display adecuado al sospechoso de turno:
li {
width: 20em; /* dispara hasLayout */
display: list-item;
}(Investigaciones posteriores me llevan a Bug Report: Ordered list rendering with width on LIs, donde se sugiere la misma solución. También hay una página de test.)
7 comentarios RSS
Yo me encontré el mismo problema, y la misma solución hace medio año cuando trabajabamos la versión que nunca salió de noxtrum.com:
aquí lo puedes ver.
Según un lector, con el list-item ya tiraba y no necesitaba del width, pero nunca llegué a comprobarlo, con el width tiraba ;-)
Este fix no soluciona el problema de que caiga el número a la zona inferior del ítem cuando se tiene más de una línea de texto.
Update.
Para regresar el número a su sitio:
li {
vertical-align: top;
display: list-item;
}
Solución de are via IM.
La solución es facil: piensa como IE y encontraras el camino. :D
albertofs: en este caso es el width el que dispara el
hasLayout. El hasLayout hace que se pierda eldisplay: list-item.Y en otros casos, el hasLayout podría venir de cualquier otro sitio.
Oscar: en mi miniprueba la caída del número también se apañaba cambiando el display. ¿No habrá otra regla tocando las pelotas?
Salud (y gracias por animar el cotarro).
Choan: No, no había ninguna regla más.
Además ahora he encontrado un nuevo problema: para el flujo de texto,
li { display: list-item; }se comporta comoblock, ignorando el forzado alist-item. Sólo tenéis que hacer la prueba conol { list-style-position: inside }.(No me gusta poner las reglas en una sola línea, pero como no hay
prepara los comentarios…)Joder, pues esto va a ser una referencia circular de bugs… hasLayout dispara los números incorrectos, la corrección de los numeritos dispara esto último que comentas…
O sea, que lo mismo mis hojas de estilo están haciendo que dios mate gatitos inocentes. Qué rabia.
En cuanto al
pre, me lo miraré. Daba por sentado que usando markdown podrías hacerlo, pero parece que solo traga si el usuario está autenticado.Salud.