Fond d'élément vide utilisé par l'élément suivant dans IE

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

Question

Dans IE6, le paragraphe suivant le paragraphe vide est affiché avec la couleur de fond du paragraphe vide, ce qui, je suppose, est faux! Cela fonctionne correctement dans Firefox, mais je n’ai pas vérifié IE7.

Existe-t-il une solution CSS à ce problème ou dois-je supprimer l'élément vide?

(Je préférerais ne pas avoir à supprimer les éléments vides, car cela implique d'écrire du code pour vérifier si chaque élément est vide avant de le sortir)

Le comportement n'a pas été modifié à l'aide de doctypes stricts ou transitoires (ajout de ce commentaire en réponse aux réponses)

Fait intéressant, l'effet ne se produit pas avec la couleur du texte, mais uniquement avec la couleur d'arrière-plan. 

<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>
Était-ce utile?

La solution

Un paragraphe vide n'a pas de sens - ce qui signifie que vous écrivez probablement un code HTML incorrect.

De plus, votre exemple ne comporte pas de DOCTYPE. Un DOCTYPE valide est essentiel pour que les navigateurs interprètent correctement votre code. Sans un code, vous serez bloqué en mode quirks.

Mais quoi qu'il en soit, la solution de contournement la plus simple pour ce bogue est simplement de définir un arrière-plan pour votre élément non-stylé actuel.

Autres conseils

Je viens de tester cela dans IE7 et je peux confirmer que cela se produit là aussi.

Il semble que le paragraphe sans style ne ait pas réellement un fond rouge, c'est juste que IE7 dessine le cadre rouge pour le paragraphe vide, puis dessine le paragraphe suivant par-dessus.

Vous pouvez le voir vous-même en essayant ce code: 

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

Vous devriez voir que le paragraphe rouge correspond à 50 pixels de gauche.

Pourquoi le fait-il? Ajouter du code pour vérifier si le paragraphe va être vide n'est pas trop difficile, cela supprime également les balises inutiles de votre sortie et évite complètement ce problème. Ça vous tente?

Essayez de mettre un espace insécable dans vos paragraphes vides ... 

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

Sauf pas d'espace après l'esperluette ...

Ajoutez un type de document en haut de votre fichier HTML. 

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

Cela forcera IE6 à basculer les décalages de formulaire en mode standard. Cela apporte de nombreux autres avantages, comme un modèle de boîte correct, vous devriez donc le faire quand même.

Une solution étrange que j'ai trouvée consistait à ajouter position: relative aux paragraphes potentiellement vides de ce type: 

<p style='background-color:red;position:relative'></p>
<p>Unstyled background fine because previous element is 'relative'</p>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top