Diferencia de representación de IE7 y Firefox 3

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

Pregunta

Aquí hay un resumen de una página que estoy desarrollando. 

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

Y el 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%;
}

En Firefox 3, el cuerpo div (con un fondo verde) se aplasta a casi nada mientras IE7 renderiza la página perfectamente. Por lo que puedo decir del estándar CSS 2.1 (a través del libro O'Reilly de Meyer), los divs flotantes deben flotar dentro de su bloque contenedor, lo que claramente no es el caso en Firefox 3.

Entonces, si la representación de Firefox es compatible, ¿qué me falta?

¿Fue útil?

Solución

Su problema es que IE7 borra el elemento padre para que contenga el hijo flotante. No es así como se debe representar. Mejores explicaciones de otros carteles.

Solución simple: aplique overflow: hidden; a su #body : 

#body {
    overflow: hidden;
}

Consulte esta publicación para una explicación.

Otros consejos

Como siempre, cuando una página se representa de manera diferente en Internet Explorer y Firefox, Firefox la representa correctamente.

El div cuerpo no debe tener ninguna altura. Solo contiene un elemento flotante, por lo que no hay nada en él que le dé altura. Un elemento flotante no afecta el tamaño de su padre. IE hace este trabajo y expande el elemento para contener sus hijos. Este es uno de los errores de representación más conocidos de IE.

Eliminar la etiqueta xml del código. El doctype debe aparecer primero en la página, o IE lo ignorará.

Si ve la página en IE 8 beta, mostrará la página exactamente como lo hace Firefox.

No hay peso o volumen asignado al div con id = " body " ;. Cualquier texto colocado dentro del div le dará volumen y renderizará el color de fondo al tamaño apropiado. Este problema también se reproducirá en los navegadores basados ??en Webkit (Chrome, Safari).

Coloque el texto en el div del cuerpo para darle peso o agregue un estilo de desbordamiento: oculto; a la div con id = body.

Gracias a todos por sus respuestas.

También hay otra solución que resuelve mi problema: hacer flotar el div padre (id = " body "). Esto viene directamente del libro de Meyer, así que no estoy seguro de cómo me lo perdí. ¡Solo otro caso de hacer es aprender! La otra cosa es que esto también resuelve otro problema que no mencioné: ¿cómo coloco un margen entre el cuerpo y el pie de página? Como en Firefox, borrar el pie de página no permite que se use un margen para dar espacio entre el cuerpo y el pie de página. Sin embargo, flotando el elemento padre, sí.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top