Hintergrund des leeren Elements durch folgendes Element in IE verwendet

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

Frage

In IE6 der Absatz nach dem leeren Absatz wird mit der Hintergrundfarbe des leeren Absatzes angezeigt, was ich vermute, ist falsch! Es funktioniert richtig in Firefox, aber ich habe IE7 nicht überprüft.

Gibt es eine CSS-Lösung für dieses Problem, oder muss ich das leere Element entfernen?

(ich würde lieber nicht leere Elemente zu entfernen, wie das Schreiben von Code beinhaltet zu überprüfen, ob jedes Element vor der Ausgabe dieses leer ist)

Das Verhalten ist unverändert entweder streng oder Übergang doctypes (habe diesen Kommentar in Reaktion auf Antworten) mit

Interessanterweise ist der Effekt nicht mit Textfarbe auftritt, nur Hintergrundfarbe. 

<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>
War es hilfreich?

Lösung

Ein leerer Absatz ist bedeutungslos - was bedeutet, dass Sie wahrscheinlich die falsche Schreiben von HTML

.

Auch Ihr Beispiel hat keine DOCTYPE -. Eine gültige DOCTYPE für das Erhalten Browser unerlässlich ist, um die korrekte Schreibweise Ihren Code zu interpretieren, ohne dass man werden Sie im Quirks-Modus stecken

Aber wie auch immer, für diesen Fehler ist die einfachste Abhilfe einfach einen Hintergrund für Ihr aktuelles unstyled Element eingestellt ist.

Andere Tipps

Ich habe gerade getestet, dass in IE7 und kann bestätigen, dass es dort geschieht auch.

Es sieht aus wie der unstyled Absatz nicht eigentlich einen roten Hintergrund hat, ist es nur, dass IE7 das rote Feld für den leeren Absatz zieht und dann den folgenden Absatz über die Spitze zu ziehen.

Sie können versuchen, diesen Code diese für sich selbst sehen: 

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

Sie sollten sehen, dass die rote Ziffer von links 50px wird.

Warum es dies tut, ist reine Vermutung. Hinzufügen einiger Code zu überprüfen, ob der Absatz geht leer sein, ist nicht zu hart, und es beseitigt nutzlos Markup aus dem Ausgang und vermeidet dieses Problem zusammen. Geben, dass ein gehen?

Versuchen Sie, einen non-breaking Raum in Ihrem leeren Absatz setzen ... 

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

Mit Ausnahme ohne Leerzeichen nach dem Ampersand ...

Fügen Sie einen Doctype oben in Ihrer HTML-Datei. 

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

Das wird IE6 zwingen Form Macken Standards-Modus zu wechseln. Dies bringt eine Menge tother Vorteile, wie ein richtiges Box-Modell, so sollten Sie es trotzdem tun.

Eine seltsame Abhilfe, die ich war gefunden Position hinzuzufügen: relativ zu den potentiell leere Absätze wie folgt aus: 

<p style='background-color:red;position:relative'></p>
<p>Unstyled background fine because previous element is 'relative'</p>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top