Antecedentes do elemento vazia utilizada pelo elemento seguinte no IE

StackOverflow https://stackoverflow.com/questions/289315

Pergunta

No IE6 o parágrafo seguinte o parágrafo vazio é exibida com a cor do parágrafo vazio, o que eu estou supondo fundo é errado! Ele funciona corretamente no Firefox, mas eu não tenho verificado IE7.

Existe uma solução CSS para este problema, ou eu tenho para remover o elemento vazio?

(Eu preferiria não ter que remover os elementos vazios, como que envolve escrever código para verificar se cada elemento está vazio antes de emitir-lo)

O comportamento não é alterado usando doctypes quer rígidas ou de transição (adicionado este comentário em resposta às respostas)

Curiosamente o efeito não ocorre com a cor do texto, apenas a cor de fundo. 

<html>
<head>
</head>
<body>

  <p style='background-color:green'>Green content</p>
  <p style='background-color:red'>Red content</p>
  <p>Unstyled background working because previous red element is not empty</p>

  <p style='background-color:green'>Green content</p>
  <p style='background-color:red'></p>
  <p>Unstyled background broken because previous red element is empty</p>

  <p style='color:green'>Green content</p>
  <p style='color:red'>Red content</p>
  <p>Unstyled text color working because previous red element is not empty</p>

  <p style='color:green'>Green content</p>
  <p style='color:red'></p>
  <p>Unstyled text color working even though previous red element is empty</p>

</body>
</html>
Foi útil?

Solução

Um parágrafo vazio é sem sentido -. O que significa que você provavelmente está escrevendo o HTML errado

Além disso, o exemplo não tem um DOCTYPE -. Um DOCTYPE válido é essencial para obter navegadores para interpretar corretamente seu código, sem que você vai ser preso em modo de peculiaridades

Mas de qualquer maneira, a solução mais simples para esse bug é simplesmente definir um fundo para seu elemento sem estilo atual.

Outras dicas

Eu apenas testada que no IE7 e pode confirmar que acontece lá também.

Parece que o parágrafo sem estilo não , na verdade, tem um fundo vermelho, só que o IE7 está atraindo a caixa vermelha para o parágrafo vazio e, em seguida, desenhar o seguinte parágrafo por cima.

Você pode ver isso por si mesmo, tentando este código: 

<p style='background-color:green'>Green content</p>
<p style='background-color:red; margin-left:50px'></p>
<p>Unstyled background broken because previous red element is empty</p>

Você deverá ver que o parágrafo vermelho é 50px da esquerda.

Por que está fazendo isso é uma incógnita. Adicionando um pouco de código para verificar se o parágrafo vai estar vazio não é muito difícil, mais ele remove marcação inútil de sua saída e evita este problema completamente. Dê que uma vez?

Tente colocar um espaço sem quebras em seus parágrafos vazios ... 

<p style='color:red'>& nbsp;</p>

exceto nenhumas espaço após o comercial ...

Adicionar um doctype para o topo do seu arquivo HTML. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Isso vai forçar IE6 para mudar de formulário peculiaridades no modo de padrões. Isso traz uma série de vantagens tOutros, como um modelo de caixa correta, então você deve estar fazendo isso de qualquer maneira.

Uma solução estranha que eu encontrei foi para adicionar position: relative aos parágrafos potencialmente vazios assim: 

<p style='background-color:red;position:relative'></p>
<p>Unstyled background fine because previous element is 'relative'</p>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top