Différence de rendu IE7 et Firefox 3

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

Question

Voici un aperçu d'une page que je développe. 

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

Et le 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%;
}

Dans Firefox 3, le corps div (avec un arrière-plan vert) est écrasé à presque rien tandis qu'IE7 rend la page parfaitement. D'après ce que je peux dire de la norme CSS 2.1 (via le livre O'Reilly de Meyer), les divs flottantes devraient flotter dans leur bloc conteneur, ce qui n'est clairement pas le cas dans Firefox 3.

Donc si le rendu de Firefox est conforme, que me manque-t-il?

Était-ce utile?

La solution

Votre problème est que IE7 efface l'élément parent afin qu'il contienne l'enfant flottant. Ce n'est pas comment il devrait être rendu. De meilleures explications par d’autres affiches.

Solution simple: appliquez : masqué; à votre #body : 

#body {
    overflow: hidden;
}

Voir ce message pour une explication.

Autres conseils

Comme toujours, lorsqu'une page est rendue différemment dans Internet Explorer et Firefox, Firefox s'affiche correctement.

La div du corps ne doit avoir aucune hauteur. Il ne contient que des éléments flottants, il n'y a donc rien qui puisse lui donner une hauteur. Un élément flottant n'affecte pas la taille de son parent. IE le fait et élargit l’élément pour qu’il contienne ses enfants. C’est l’une des erreurs de rendu bien connues d’IE.

Supprimez la balise XML du code. Le doctype doit apparaître en premier dans la page, sinon IE l'ignorera.

Si vous affichez la page dans IE 8 bêta, la page sera rendue exactement comme Firefox.

Aucun poids ni volume n'a été attribué à la division avec id = "corps". Tout texte placé à l'intérieur de la div lui donnera du volume et restituera la couleur de fond à la taille appropriée. Ce problème sera également présent dans les navigateurs Webkit (Chrome, Safari).

Placez le texte dans la division body pour lui donner du poids ou ajoutez un style de débordement: hidden; à la div avec id = body.

Merci à tous pour vos réponses.

Une autre solution permet également de résoudre mon problème: faire flotter le div parent (id = "corps"). Cela vient directement du livre de Meyer, donc je ne suis pas sûr de l'avoir manqué. Juste un autre cas de faire, c'est apprendre! L’autre chose, c’est que cela résout également un autre problème que je n’ai pas énoncé: comment insérer une marge entre le corps et le pied de page? Depuis Firefox, effacer le pied de page ne permet pas d'utiliser une marge pour laisser un espace entre le corps et le pied de page. Flotter l’élément parent, cependant.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top