Fundo da cor e Itálico conjuntos off Internet Explorer 7 bug
-
19-09-2019 - |
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
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ê.