Sfondo dell'elemento vuoto utilizzato dal seguente elemento in IE

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

Domanda

In IE6 il paragrafo che segue il paragrafo vuoto viene visualizzato con il colore di sfondo del paragrafo vuoto, che suppongo sia sbagliato! Funziona correttamente in Firefox, ma non ho controllato IE7.

Esiste una soluzione CSS a questo problema o devo rimuovere l'elemento vuoto?

(Preferirei non rimuovere elementi vuoti, poiché ciò implica la scrittura di codice per verificare se ogni elemento è vuoto prima di inviarlo)

Il comportamento è invariato usando doctypes rigorosi o di transizione (aggiunto questo commento in risposta alle risposte)

È interessante notare che l'effetto non si verifica con il colore del testo, ma solo con il colore di sfondo. 

<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>
È stato utile?

Soluzione

Un paragrafo vuoto non ha senso, il che significa che probabilmente stai scrivendo l'HTML sbagliato.

Inoltre, il tuo esempio non ha un DOCTYPE - un DOCTYPE valido è essenziale per indurre i browser a interpretare correttamente il tuo codice, senza che uno rimanga bloccato in modalità strane.

Ma comunque, la soluzione più semplice per questo bug è semplicemente impostare uno sfondo per il tuo elemento non modificato corrente.

Altri suggerimenti

L'ho appena provato in IE7 e posso confermare che succede anche lì.

Sembra che il paragrafo non modificato non abbia effettivamente uno sfondo rosso, è solo che IE7 sta disegnando la casella rossa per il paragrafo vuoto e quindi disegnando il paragrafo seguente sopra.

Puoi vederlo da solo provando questo codice: 

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

Dovresti vedere che il paragrafo rosso è 50px da sinistra.

Perché lo sta facendo è la supposizione di chiunque. L'aggiunta di un codice per verificare se il paragrafo sarà vuoto non è troppo difficile, inoltre rimuove il markup inutile dall'output ed evita del tutto questo problema. Dare una prova?

Prova a mettere uno spazio non-break nei tuoi paragrafi vuoti ... 

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

Tranne lo spazio dopo la e commerciale ...

Aggiungi un tipo di documento all'inizio del tuo file HTML. 

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

Ciò costringerà IE6 a passare dalla modalità standard alla modalità standard. Questo porta molti altri vantaggi, come un modello di scatola corretto, quindi dovresti farlo comunque.

Una strana soluzione che ho trovato è stata quella di aggiungere la posizione: relativa ai paragrafi potenzialmente vuoti come questo: 

<p style='background-color:red;position:relative'></p>
<p>Unstyled background fine because previous element is 'relative'</p>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top