Fundo da cor e Itálico conjuntos off Internet Explorer 7 bug

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

Pergunta

O código a seguir demonstra o problema que estou enfrentando: 

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

<style>

p
{
    background-color:#FFF;
}


</style>
</head>
<body>

  <img src="http://www.google.com/intl/en_ALL/images/logo.gif" style='float:left;'>
  <p><em>This is an italic sentence.</em></p>
  <p><strong>This is a bold sentence.</strong></p>
  <p>This is a normal sentence.</p>

</body>
</html>

Quando este código é visto no IE7, o logotipo do Google será exibido para a esquerda com 'barras horizontais brancas' que funcionam através dela alinhado com cada parágrafo, exibido à direita.

Removendo a primeira linha com o marcas faz com que as linhas a desaparecer. Tente você mesmo. Remova cada uma das três linhas e ver como as mudanças de bugs.

O que no mundo está acontecendo com isso?

-

Resolução: questão hasLayout. Adicionando zoom:. 1 atributo para em corrige o problema

Foi útil?

Solução

Não sei por que isso está acontecendo, mas há muitas maneiras de garantir isso não acontecer, incluindo a adição de display:. Inline-block ao em

Outras dicas

Isso está acontecendo por causa da imagem flutuou.

Quando uma imagem é flutuou tecnicamente não tem qualquer layout de seu próprio. As barras brancas são as tags

, já que em CSS você deu-lhes um fundo de #FFF.

Para IE7 é pensa que o

são realmente começando no início da página, no canto esquerdo, por isso começa-los lá, mas simplesmente se choca o conteúdo passado a imagem flutuou, deixando bares engraçado brancas overtop do flutuou imagem.

Gostaria de tentar começar em torno dele, dando a seus tags

margem esquerda. Se você fizer margem esquerda suficiente para passar a imagem que você não deve ter mais aquelas barras.

Portanto, tente algo como ... 

p{ background-color: #fff; margin-left: 300px; }

Você pode ajustar a margem esquerda, mas algo nesse sentido deve se livrar das barras brancas para você.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top