Vamos a echar un vistazo a some comments1) en una página generada por Wordpress (que no es un sitio mantengo, me pregunto Que está pasando aqui). Como estas páginas podrían desaparecer en el futuro cercano, he puesto algunas capturas de pantalla en línea. Esto es lo que vi:herencia de la propiedad de tipo de estilo de lista en Firefox (bug en Firebug?)
Obviamente, los marcadores list-item no deberían estar allí. Así que decidí mirar la fuente usando Firebug. Como puede ver, Firebug afirma que la propiedad list-style (que contiene none) se hereda de ol.commentlist. Pero si ese es el caso, ¿por qué son visibles el círculo y el cuadrado? Al verificar el estilo calculado, Firebug muestra el list-style-type s correctamente.
¿Cuál es el comportamiento correcto? Acabo de hacer una comprobación rápida en Chromium, cuyo inspector web dio una mejor visión de la realidad (los marcadores de elementos de la lista también se muestran en este navegador):
De acuerdo con WebKit, list-style de ol.commentlist no es heredado, solo el valor predeterminado de list-style-type del motor de representación.
Por lo tanto, podemos concluir que la salida de ambos buscadores es correcta y que Firefox (Firebug) muestra una representación incorrecta de los estilos heredados. ¿Qué dice el CSS specification?
Inheritance transferirá los
list-stylevalores deOLyULelementos paraLIelementos. Esta es la forma recomendada de para especificar la información del estilo de lista .
No mucho sobre la herencia de ol propiedades a ul s. ¿Firebug está equivocado al respecto o debe anidar ul s heredar (algunas) propiedades de ol s (y si es así, por qué no se muestran los elementos en dos navegadores totalmente diferentes)? Para ser claros, mi pregunta real es: , ¿qué propiedades deben anidar? ul elementos heredan de ol elementos que los encierran?
EDIT: me había olvidado de la Opera y la imagen se vuelve aún más claro cuando se mira en el inspector de ese navegador:
A medida que el panel de la derecha indica, anidados ul elementos heredan propiedades de ol elementos, pero los valores predeterminados del explorador de list-style-type y list-style-position anulan los especificados por su elemento primario.
Como Vinhboy apoya mi sospecha de que se trata de un error en alguna parte (Firefox? Firebug?), Presenté un bug report.
Por cierto, me las arreglé para dejar que los marcadores desaparecen con sólo cambiar la línea 312 de style.css a
ol.commentlist, li.commentlist, ul.children {
Cuando también definir explícitamente la list-style de ul.children a none, los marcadores no están pintadas. Puede echar un vistazo a las capturas de pantalla de Firebug y WebKit's Web Inspector en este caso, si lo desea.
1) Después de ponerse en contacto con el desarrollador de la página que fija los marcadores de lista no deseados, por lo que no puede ver este problema más (sin editar el CSS sobre la marcha). Todavía puede ver las capturas de pantalla para ver de qué se trata esto, pero también hice un caso de prueba y lo agregué a mi bug report. Para mayor comodidad de todos, el código HTML/CSS lee:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><ol>/<ul> inheritance test case</title>
<style>
ol {
list-style: none;
}
</style>
</head>
<body>
<!-- Some of the text below is quoted from D.E. Knuth, The TeXBook, p. 395 -->
<ol>
<li>First item</li>
<li>Second one</li>
<li>Now let's have some fun with a nested <ul>:
<ul>
<li>First item</li>
<li>And the second one again (this is incredibly boring, but it's just an example)</li>
<li>Ho hum</li>
<li>Are you still there?</li>
</ul>
</li>
<li>Just another item</li>
</ol>
</body>
</html>
Simplemente seleccione el ul y observe que Firebug dice que heredó la propiedad list-style del ol (aunque no lo hizo, cuando miramos la página realmente renderizada).
Compare esto con el inspector web de WebKit y especialmente con la variante Opera . El último explicitly makes clear que recae en los valores predeterminados del navegador de list-style-type y list-style-position.
muy buena observación. parece que firebug está mal aquí. – vinhboy
Bien descubierto, pero no estoy seguro de cuál es su pregunta? – graphicdivine
@graphicdivine: Ya temía eso. Para aclarar las cosas, configuré mi pregunta real en negrita. También agregué un caso de prueba mínimo, ya que la página original con la que me vinculé se corrigió. –