2012-02-25 10 views
9

Ho letto in questo sitepoint page e quirksmode page sulla nuova pseudoclass :empty.: pseudoclass vuoto quando si aggiunge contenuto dinamico

Sitepoint ha affermato che anche quando è aggiunto un contenuto dinamico, lo stile vuoto avrà comunque effetto. Si noti che firefox è stato colui che si comporta in questo modo.

Quirksmode ha detto che scarta lo stato vuoto quando è riempito con alcuni elementi o testo. la demo di questo sito funziona nel mio browser (chrome 19). Quindi ho pensato che solo Firefox potesse essere bacato.

Tuttavia ho questo codice nel mio plugin, che riempie dinamicamente un elenco di elementi, non sembra funzionare, here's a fiddle che aggiunge voci di elenco, anche se si fa clic sul pulsante, gli elementi non verranno compaiono fino a quando non provi a eseguirne il debug nella console (appaiono magicamente quando fai clic sullo <li> nell'albero degli elementi).

Perché sta succedendo questo e c'è un modo per "forzare lo scarto" dello stile vuoto?

So che ci sono altri modi per fare quello che sto facendo nel violino (e attualmente sto facendo uno di questi "altri modi"), ma il metodo :empty è molto più semplice.

UPDATE:

aggiunto un pulsante Articolo Rimuovi. quando l'ultimo oggetto viene rimosso, l'elenco dovrebbe scomparire, ma non funziona ancora. hmmm ... proverò a controllare un altro browser.

FIX

temporanea correzione/alternativa all'utilizzo :empty e display:none è quello di avere l'elemento di avere zero width, height, borders, margins e paddings. inoltre, position:absolute per rimuoverlo dal flusso.

+0

Non mi sono imbattuto in ': vuoto' fino ad ora, e +1 per una domanda interessante. –

+0

Bene, stanno comparendo in FX10. –

risposta

5

Il violino fornito da me funziona con FF10 e IE9. Non riesce solo in Chrome (18+)

Non capisco perché questo accade, come pagina quirksmode funziona in Chrome come pure ..

Per la forza scartare sembra essere fattibile impostando quasi tutte le proprietà CSS con il codice di ..

esempio a http://jsfiddle.net/gaby/YprUV/9/

Aggiornamento

Ok, ho trovato questo 012.334.che sta :empty selettore comportamento anomalo quando viene utilizzato con display:none

Si è contrassegnato come fisso, ma forse dovremmo ri-OOPEN esso ..

Ecco un test che non utilizza display:none (cambia solo la colore di sfondo) e funziona perfettamente .. http://jsfiddle.net/YprUV/11/

+0

appena testato in Opera 11.61 e IE9. sembra che si tratti di un problema con Chrome. Stavo considerando esplicitamente l'aggiunta di 'display: block' per farlo funzionare. – Joseph

Problemi correlati