Error de división de desplazamiento CSS de IE7

Question

Recientemente me encontré con un error exclusivo de IE7 que pensé en compartir, así que cuando visite este sitio dentro de 6 meses y descubra lo mismo, lo tendré a mano.

Creo que la forma más sencilla de recrear este error sería el siguiente html en una página con un tipo de documento declarado (funciona correctamente en "modo peculiar"/sin tipo de documento):

<div style="overflow: auto; height: 150px;">
    <div style="position: relative;">[...]</div>
</div>

En IE7, el div externo tiene un tamaño fijo y el div interno está relativamente posicionado y contiene más contenido (suponiendo que el div interno provoca un desbordamiento).En todos los demás navegadores, esto parece funcionar como se esperaba.

Captura de pantalla:

Answer 1

La solución más sencilla sería agregar position: relative; al div exterior.Esto hará que IE7 funcione según lo previsto.

(Ver: http://rowanw.com/bugs/overflow_relative.htm).

EDITAR: Versión en caché del enlace roto en waybackmachine.org