Lo que está mal con este simple CSS en IE?

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

Pregunta

Hay un div que tiene un contenido interno, un div con un borde que está dentro de un div. De alguna manera, este div se amplía para abarcar la próxima div. Se me lleva la razón. 

<div style="background: yellow;">
  <div>
    <div style="border: 1px solid black; background: green">green background</div>
  </div>
</div>
<div style="margin-top: 100px;">
  IE gives me a yellow background, unless i take away the border of the green 
  background div.
</div>

Me pregunto la causa de esto y cómo solucionarlo.

¿Fue útil?

Solución

Es necesario "dar a la disposición" a la primera div. Es mejor hacer esto usando IE6 dirigido estilos: 

<style>
   * html .haslayout {
       display:inline-block;
   }
</style>

...

<div style="background: yellow;" class="haslayout">

Este es un problema conocido IE6 con el atributo hasLayout. Leer más sobre ella aquí - http://www.satzansatz.de/cssd/onhavinglayout.html

Otros consejos

Parece que estás en quirksmode de transición que es malo.

Los estrictos soluciona esto. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Una solución es poner "position: relative" en todas partes, pero esto rompe otras cosas en mi página

.

se echa en falta un punto y coma en el div interior. He visto un comportamiento muy raro si se omite el último punto y coma. 

<div style="border: 1px solid black; background: green;">green background</div>

No está seguro de qué versión de IE que tiene, pero esto funciona en IE7 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Test</title>
  </head>  
  <body>
    <div style="background: yellow;">
     <div>
        <div style="border: 1px solid black; background: green;">green background</div>
      </div>
    </div>
    <div style="margin-top: 100px;">
      IE gives me a yellow background, unless i take away the border of the green 
      background div.
    </div>
  </body>
</html>

La respuesta es mucho encanto fácil, porque la jerarquización diferentes divs, y ninguno de ellos tiene una altura, por lo que hay un desbordamiento para IE6. hacer esto: 

<div style="background: yellow;height: 1%;">

y va a funcionar muy bien.

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