altura divs posicionado con respecto añadió en IE6 antes de la parte superior negativo

Question

Tengo el siguiente

<div id=A style='height: 120px;'>
  <div id=B style='height: 100px;'>
    <div id=D style='height:  60px; top 0px; position: relative;'>Stuff D</div>
    <div id=E style='height:  80px; top: -40px; position: relative;'>Stuff E</div>
  </div>
  <div id=C style='height:  20px;'>Footer</div>
</div>

En los navegadores que no sean Internet Explorer 6, esto funciona bien. Sin embargo, Internet Explorer 6 agrega las alturas de D & E a 140 y B fuerzas para convertirse en 140 que empuja hacia abajo por la C 40. Sin embargo, la parte superior de E se representa la superposición de 40px D como debería. Es sólo la casilla B se convierte en el 140 de alta sólo en IE6.

¿Qué puedo hacer con la CSS / HTML para hacer que se comporte IE6 sin afectar a otros navegadores que consiguen y mantienen B a 100px?

Answer 1

He descubierto que margin-top: - ?? px; va a hacer lo mismo que acaba de arriba: - ?? px hace. Gracias por la ayuda. Voy a intentar el desbordamiento:!. Ocultos y el importante, porque suenan interesante

Answer 2

No es el hecho de que las alturas se agregan de antemano que le está arruinando --- todos los navegadores hacen esto. Es el hecho de que el IE 6 tiene una idea diferente de lo que debe hacer cuando el height del contenido de #B excede 100px. Puesto que usted sabe la altura que desea para #B, se puede añadir a overflow: hidden el estilo existente.

<div id="B" style="height: 100px; overflow: hidden;">