it-swarm-es.com

IE7 CSS Scrolling Div Bug

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

Creo que la forma más fácil de recrear este error sería el siguiente html en una página con un doctype declarado (funciona correctamente en "modo peculiar"/no-doctype):

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

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

Captura de pantalla: bug screenshot

49
frank hadder

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

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

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

98
frank hadder