Couleur de fond et Italique déclenche Internet Explorer 7 bug

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

Question

Le code suivant illustre le problème je rencontre: 

<!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>

Lorsque ce code est affiché dans IE7, le logo Google sera affiché à gauche avec « barres horizontales blanches » en cours d'exécution à travers elle alignés avec chaque paragraphe, affiché à droite.

Retrait de la première ligne avec les balises provoque les lignes à disparaître. Essayez vous-même. Retirez chacune des trois lignes et voir comment les changements de bugs.

Qu'est-ce que dans le monde qui se passe avec ça?

-

Résolution: le problème hasLayout. Ajout zoom:. 1 attribut em corrige le problème

Était-ce utile?

La solution

Je ne sais pas pourquoi ça se passe, mais il y a plusieurs façons de faire en sorte qu'il ne fonctionne pas, y compris l'ajout d'affichage:. Inline-block à l'em

Autres conseils

Ceci se produit à cause de l'image flottante.

Quand une image est flottante, il ne techniquement pas mise en page propre. Les barres blanches sont les balises

, car en CSS vous leur avez donné un arrière-plan de #FFF.

Pour IE7 est PENSE les

balises commencent en fait au début de la page à l'extrême gauche, il les commence là, mais les bosses simplement le contenu passé l'image flottante, laissant des barres blanches drôles overtop du flotta image.

Je voudrais essayer de contourner cela en donnant vos balises

marge de gauche. Si vous faites assez de marge gauche pour franchir l'image que vous ne devriez pas obtenir ces barres plus.

Donc, essayez quelque chose comme ... 

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

Vous pouvez régler la marge de gauche, mais quelque chose le long de ces lignes devrait se débarrasser des barres blanches pour vous.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top