IE7 und Firefox 3 Rendering Difference

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

Frage

Hier eine Übersicht einer Seite Ich entwickle. 

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

Und die 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, der Körper div (mit einem grünen Hintergrund) ist so gut wie nichts gestaucht, während IE7 die Seite perfekt macht. Von dem, was ich von dem CSS 2.1 Standard (über Meyers O'Reilly-Buch) sagen kann, schwebte divs in ihrem Container Block schweben soll, die eindeutig nicht der Fall in Firefox 3 ist

Also, wenn Firefox-Rendering entspricht, was bin ich dabei?

War es hilfreich?

Lösung

Ihr Problem ist, dass IE7 das übergeordnete Element löscht, so dass er das schwebende Kind enthält. Dies ist nicht, wie es gemacht werden soll. Bessere Erklärungen von anderen Plakaten.

Einfach fix: anwenden overflow: hidden; auf Ihre #body: 

#body {
    overflow: hidden;
}

Siehe diesen Beitrag eine Erklärung.

Andere Tipps

Wie immer, wenn eine Seite differntly in Internet Explorer und Firefox gemacht wird, macht Firefox die Seite richtig.

Der Körper div sollte keine Höhe haben. Es enthält nur Floating Element, so gibt es nichts darin, dass es jede Höhe geben würde. Ein schwimmendes Element wirkt sich nicht auf die Größe der es Eltern. IE tut dies wroing und erweitert das Element es ist Kinder zu enthalten. Dies ist einer der bekannten Rendering-Fehler von IE.

Entfernen aus dem Code der XML-Tag. Der Doctype hat zuerst in der Seite zu kommen, oder IE wird es ignoriert.

Wenn Sie die Seite in IE 8 Beta sehen, wird es die Seite machen genau wie Firefox funktioniert.

Es gibt kein Gewicht oder Volumen in die div zugewiesen mit id = „Körper“. Jeder Text innerhalb der div platziert wird ihm Volumen geben und die Hintergrundfarbe auf die entsprechende Größe machen. Dieses Problem wird auch (Chrome, Safari) spielt in aus Webkit-basierten Browsern.

So oder Ort Text im Körper div Gewicht zu geben oder eine Art von Überlauf hinzu: hidden; auf die div mit id = Körper.

Vielen Dank allen für Ihre Antworten.

Es gibt eine andere Lösung, die auch mein Problem löst: floating das übergeordnete div (id = "body"). Dies kommt direkt aus Meyers Buch, also bin ich nicht sicher, wie ich es verpasst. Nur ein weiterer Fall zu tun ist, zu lernen! Die andere Sache ist, dass dies löst auch ein anderes Problem, dass ich nicht Staat tat: Wie passe ich einen Spielraum zwischen dem Körper und Fußzeilen? Da in Firefox, die Fußzeile Clearing nicht erlaubt ein Spielraum zwischen dem Körper und Fußzeile geben Raum verwendet werden. Schwimmdock das übergeordnete Element jedoch der Fall ist.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top