Il colore di sfondo e il corsivo attivano il bug di Internet Explorer 7

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

Domanda

Il codice seguente dimostra il problema che sto riscontrando:

<!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 questo codice viene visualizzato in IE7, il logo di Google verrà visualizzato a sinistra con "barre orizzontali bianche" che lo attraversano allineate con ciascun paragrafo, visualizzato a destra.

La rimozione della prima riga con i tag <em> fa sì che le righe scompaiano.Prova tu stesso.Rimuovi ciascuna delle tre righe e guarda come cambia il bug.

Cosa sta succedendo nel mondo?

--

Risoluzione:ha un problema di layout.Aggiunta dello zoom:1 attributo a em corregge il problema.

È stato utile?

Soluzione

Non so perché sta accadendo, ma ci sono molti modi di fare attenzione che non, tra cui l'aggiunta di visualizzazione:. Inline-block al em

Altri suggerimenti

Ciò accade a causa dell'immagine flottata.

Quando un'immagine viene flottata, tecnicamente non ha alcun layout proprio.Le barre bianche sono i tag <p>, poiché nei CSS hai dato loro uno sfondo #FFF.

Per IE7 si pensa che i tag <p> in realtà inizino all'inizio della pagina all'estrema sinistra, quindi li inizia da lì, ma fa semplicemente scorrere il contenuto oltre l'immagine flottata, lasciando divertenti barre bianche sopra l'immagine flottata.

Proverei ad aggirare il problema dando ai tag <p> il margine sinistro.Se crei abbastanza margine sinistro per superare l'immagine, non dovresti più ottenere quelle barre.

Quindi prova qualcosa come...

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

Puoi regolare il margine sinistro, ma qualcosa del genere dovrebbe eliminare le barre bianche per te.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top