2012-02-25 16 views
9

Przeczytałem w tym sitepoint page i quirksmode page o nowym pseudoklasy :empty.: pusty pseudoklasa przy dodawaniu treści dynamicznej

Punkt Sitepoint powiedział, że nawet przy dołączonej zawartości dynamicznej pusty styl będzie nadal działał. Należy zauważyć, że firefox był tym, który zachowuje się w ten sposób.

Tryb Quirksmode powiedział, że odrzuca pusty stan, gdy jest wypełniony elementami lub tekstem. wersja demonstracyjna na tej stronie działa w mojej przeglądarce (chrome 19). Zakładam, że tylko firefox będzie błędny.

Mam jednak ten fragment kodu w mojej wtyczce, który dynamicznie wypełnia listę przedmiotami, nie wydaje się działać, here's a fiddle który dołącza elementy listy, nawet jeśli klikniesz przycisk, elementy nie będą pojawiają się, dopóki nie spróbujesz debugować go w konsoli (pojawiają się one magicznie po kliknięciu na <li> w drzewie elementów).

Dlaczego tak się dzieje i czy istnieje jakieś działanie, aby "odrzucić" pusty styl?

Wiem, że są inne sposoby robienia tego, co robię w skrzypcach (i obecnie wykonuję jeden z tych "innych sposobów"), ale metoda :empty jest o wiele łatwiejsza.

UPDATE:

dodano przycisk pozycję Usuń. kiedy ostatni przedmiot zostanie usunięty, lista powinna zniknąć - nadal nie działa. hmmm .. spróbuję sprawdzić w innej przeglądarce.

FIX

Temporary fix/alternatywnej do korzystania :empty i display:none ma mieć element zero width, height, borders, margins i paddings. dodatkowo, position:absolute, aby usunąć go z przepływu.

+0

Nie natknąłem się na ': empty' do tej pory, a +1 na interesujące pytanie. –

+0

Cóż, pojawiają się one w FX10. –

Odpowiedz

5

Udostępnione skrzypce działa dla mnie z FF10 i IE9. To nie tylko w Chrome (18+)

Nie wiem, dlaczego tak się dzieje, ponieważ strona Quirks Mode działa w Chrome, jak również ..

Dla siły wyrzucić wydaje się być w stanie zrobić, ustawiając prawie każda własność css z kodem ..

przykład w http://jsfiddle.net/gaby/YprUV/9/

Aktualizacja

Ok, znalazłem ten Chrome bug report czyli o :empty selektor niewłaściwie stosowany z display:none

jest oznaczone jako stałe, ale może powinniśmy ponownie OOPEN go ..

Oto test, który nie korzysta z display:none (po prostu zmienia kolor tła) i działa dobrze .. http://jsfiddle.net/YprUV/11/

+0

właśnie testowane w Operze 11.61 i IE9. Wygląda na to, że to problem z Chrome. Zastanawiałem się wyraźnie dodając 'display: block', aby działało. – Joseph

Powiązane problemy