Differenza di rendering di IE7 e Firefox 3

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

Domanda

Ecco uno schema di una pagina che sto sviluppando. 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <link rel="stylesheet" href="../css/test.css" />
    <title>Prosperity Login</title>
  </head>
  <body>
    <div id="banner">
    </div>
    <div id="subbanner">
    </div>
    <div id="body">
      <div id="colA">
      </div>
      <div id="colB">
        <div id="B1">
        </div>
        <div id="B2">
        </div>
      </div>
      <div id="colC">
      </div>
      <div id="colD">
      </div>
    </div>
    <div id="footer">
    </div>
  </body>
</html>

E il CSS: 

* {
  margin: 0px;
  padding: 0px;
}



div {
  border: 1px dotted;
}

#banner {
  height: 70px;
  width: 100%;
}

#subbanner {
  height: 30px;
  width: 100%;
}

#body {
  background-color: #CCFFCC;
  width: 80%;
}

#colA{
  float: left;
  height: 120px;
  width: 24%;
}

#colB{
  float: left;
  height: 80px;
  width: 24%;
}
#colC{
  float: left;
  height: 120px;
  width: 24%;
}
#colD{
  float: left;
  height: 120px;
  width: 24%;
}

#B1{
  float: right;
  height: 48px;
  width: 80%;
}

#B2{
  float: right;
  height: 28px;
  width: 80%;
}
#footer{
  height: 30px;
  width: 100%;
}

In Firefox 3, il body div (con uno sfondo verde) viene ridotto quasi a nulla mentre IE7 esegue il rendering della pagina perfettamente. Da quello che posso dire dello standard CSS 2.1 (tramite il libro O'Reilly di Meyer), i div fluttuanti dovrebbero galleggiare all'interno del loro blocco container, il che chiaramente non è il caso in Firefox 3.

Quindi, se il rendering di Firefox è conforme, cosa mi manca?

È stato utile?

Soluzione

Il tuo problema è che IE7 cancella l'elemento genitore in modo che contenga il figlio mobile. Non è così che dovrebbe essere reso. Spiegazioni migliori di altri poster.

Correzione semplice: applica overflow: nascosto; al tuo #body : 

#body {
    overflow: hidden;
}

Vedi questo post per una spiegazione.

Altri suggerimenti

Come sempre, quando una pagina viene visualizzata in modo diverso in Internet Explorer e Firefox, Firefox esegue il rendering della pagina correttamente.

Il div del corpo non dovrebbe avere alcuna altezza. Contiene solo elementi fluttuanti, quindi non contiene elementi che gli diano un'altezza. Un elemento mobile non influisce sulla dimensione del suo genitore. IE fa questo problema ed espande l'elemento per contenere i suoi figli. Questo è uno degli errori di rendering ben noti di IE.

Rimuovi il tag xml dal codice. Il tipo di documento deve venire prima nella pagina, altrimenti IE lo ignorerà.

Se visualizzi la pagina in IE 8 beta, la renderà esattamente come Firefox.

Non ci sono pesi o volumi assegnati al div con id = " body " ;. Qualsiasi testo inserito all'interno del div gli darà volume e ridurrà lo sfondo di colore alla dimensione appropriata. Questo problema si verifica anche nei browser basati su Webkit (Chrome, Safari).

Posiziona il testo nel div del corpo per dargli peso o aggiungi uno stile di overflow: nascosto; al div con id = body.

Grazie a tutti per le risposte.

C'è un'altra soluzione che risolve anche il mio problema: fluttuare il genitore div (id = "body"). Questo deriva direttamente dal libro di Meyer, quindi non sono sicuro di come mi sia perso. Solo un altro caso di fare è imparare! L'altra cosa è che questo risolve anche un altro problema che non ho dichiarato: come posso adattare un margine tra il corpo e il piè di pagina? Dato che in Firefox, cancellare il piè di pagina non consente di utilizzare un margine per dare spazio tra il corpo e il piè di pagina. Tuttavia, l'elemento genitore mobile lo fa.

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