: pseudo-classe vazia ao adicionar conteúdo dinâmico

10

Eu li nesta página do sitepoint e quirksmode page sobre o novo pseudoclass :empty .

Sitepoint disse que, mesmo quando há conteúdo dinâmico anexado, o estilo vazio ainda terá efeito. Note-se que o firefox foi quem se comportou dessa maneira.

Quirksmode disse que descarta o estado vazio quando é preenchido com alguns elementos ou texto. A demonstração neste site funciona no meu navegador (chrome 19). Então eu assumi que apenas o Firefox seria um buggy.

No entanto, eu tenho este pedaço de código no meu plugin, que dinamicamente preenche uma lista com itens, não parece funcionar, aqui está um violino que acrescenta itens de lista, mesmo se você clicar no botão, os itens não aparecerão até que você tente depurá-lo no console (eles aparecem magicamente quando você clica no <li> na árvore de elementos) .

Por que isso está acontecendo, e há uma solução para "forçar o descarte" do estilo vazio?

Eu sei que existem outras maneiras de fazer o que estou fazendo no violino (e atualmente fazendo uma dessas "outras maneiras"), mas o método :empty é muito mais fácil.

UPDATE :

adicionou um botão remover item. quando o último item é removido, a lista deve desaparecer - ainda não funciona. hmmm .. vou tentar verificar em outro navegador.

FIX

Correção / alternativa temporária ao uso de :empty e display:none significa que o elemento tenha zero width , height , borders , margins e paddings . adicionalmente, position:absolute para removê-lo do fluxo.

    
por Joseph 25.02.2012 в 12:14
fonte

1 resposta

5

O violino que você forneceu funciona para mim com FF10 e IE9. Só falha no Chrome (18 +)

Não sei por que isso acontece, pois a página quirksmode também funciona no Google Chrome.

Para o force-descarte , parece ser possível configurar quase qualquer propriedade css com código.

exemplo no link

Atualizar

Ok, encontrei este relatório de erros do Chrome que é sobre o :empty seletor se comportando mal quando usado com display:none

Está marcado como fixo, mas talvez devêssemos reabri-lo.

Aqui está um teste que não usa display:none ( apenas muda a cor de fundo ) e funciona muito bem .. link

    
por Gabriele Petrioli 25.02.2012 / 12:44
fonte