2012-02-25 17 views
9

He leído en este sitepoint page y quirksmode page sobre el nuevo :empty pseudoclass.: pseudoclass vacío al agregar contenido dinámico

Sitepoint dijo que incluso cuando hay contenido dinámico adjunto, el estilo vacío seguirá teniendo efecto. Se observa que Firefox fue quien se comportó de esta manera.

Quirksmode dijo que descarta el estado vacío cuando lo completó con algunos elementos o texto. la demostración en este sitio funciona en mi navegador (Chrome 19). Así que supuse que solo Firefox estaría con errores.

Sin embargo, tengo este código en mi complemento, que llena dinámicamente una lista con elementos, no parece funcionar, here's a fiddle que agrega elementos de la lista, incluso si hace clic en el botón, los elementos no aparecerá hasta que intente depurarlo en la consola (aparecen mágicamente cuando hace clic en <li> en el árbol de elementos).

¿Por qué está pasando esto, y hay un trabajo para "descartar por la fuerza" el estilo vacío?

Sé que hay otras maneras de hacer lo que estoy haciendo en el violín (y actualmente hacer una de estas "otras formas"), pero el método :empty es mucho más fácil.

ACTUALIZACIÓN:

añadió un botón elemento de eliminación. cuando se elimina el último elemento, la lista debería desaparecer, pero aún no funciona. hmmm ... intentaré verificar en otro navegador.

FIX

Temporal fix/alternativa al uso de :empty y display:none es tener el elemento de tener cero width, height, borders, margins, y paddings. adicionalmente, position:absolute para eliminarlo del flujo.

+0

No me había encontrado ': empty' hasta ahora, y +1 para una pregunta interesante. –

+0

Bueno, están apareciendo en FX10. –

Respuesta

5

El violín que me proporcionaste funciona con FF10 e IE9. Sólo se produce un error en Chrome (18+)

No

seguro de por qué sucede esto, como la página de quirksmode funciona en Chrome, así ..

Para el fuerza descartar parece ser factible mediante el establecimiento casi cualquier propiedad CSS con código ..

ejemplo en http://jsfiddle.net/gaby/YprUV/9/

actualización

Bueno, he encontrado este Chrome bug report que está a punto :empty selector de comportarse mal cuando se utiliza con display:none

Está marcado como fijo, pero tal vez debería volver a oopen ella ..

Aquí es una prueba de que no utiliza display:none (sólo cambia el color de fondo) y funciona muy bien ... http://jsfiddle.net/YprUV/11/

+0

recién probado en Opera 11.61 e IE9. Parece que es un problema con Chrome. Estaba considerando agregar explícitamente 'display: block' para que funcione. – Joseph

Cuestiones relacionadas