Overflow en IE6

7/jul/2008 10

Ayayay cuántos dolores de cabeza he tenido a causa de Internet Explorer 6. Son bugs, fallas y mañas múltiples que se necesitan dotes de malabarista para conocerlos (ni siquiera trato de entenderlos; sólo sé que existen) y buscar una solución. He abarcado un montón de ellos aquí en CSSLab, y al parecer este es uno más de ellos ya que la lista parece ser interminable.

Desde que cambié el diseño de este sitio al actual donde la home tiene un scroll horizontal, no pude solucionarlo para IE6. Como ese es mi browser más odioado, lo dejé para ‘luego lo veo‘. Pero ya era hora de darle una solución final, y comencé a buscar sobre overflow: hidden en IE6. Precisamente, ese browser tiene un bug muy específico, que se da cuando tienes una caja contenedora que envuelve otra caja, y esta última tiene un position (relative o absolute) definido. Lo que sucede es que la caja que contiene no aplica el overflow: hidden; como debería, sin razón aparente.

Ver ejemplo 1

Maldito browser. No me canso de maldecirlo. 80% del mercado por puro monopolio. Bueno, la solución es demasiado simple, pero había que investigar un poco antes. Basta con aplicar position (relative o absolute) a la caja contenedora también y overflow funcionará para IE6.

Ver ejemplo final

Imagen en CSSLab de ejemplo de Overflow en IE6

Así que ya saben, si se dan esas condiciones y su caja no esconde el contenido como debería, probablemente esta es la solución. Pero cuidado, si tienen elementos flotando, quizás algún método de clearfix a la misma caja contenedora será necesario.

Comentarios

  1. fearlex [#]

    Pienso igual que tu, maldito browser, que no hace mas que darnos dolores de cabeza dia tras dia. LO mas dificil es cuando algun javascript no funciona y no hay Firebug para encontrarlo :(

    Gracias por compartir 😀

  2. Rob [#]

    Si no es con position:relative es con font-size:1px o algún fix que alguien descubra. Cada vez que me pongo a maquetar una página digo: ¿con qué me encontraré ahora en IE6? nunca defrauda, hay problemas seguro!

  3. Jorge Epuñan [#]

    Juajua oh mi odio creo q se nota demasiado con cada articulo q escribo… pero como mencione en el podcast, con algunos tips se minimizan bastante estos inconvenieentes; por ejemplo ahora estoy armando una estructura bastante compleja y apenas termine todas las cajas principales (armando en safari y ff) probe en IE y pense como tu Rob ‘ayayay q pasara con IE…’ y nada, perfecto. hasta ahora…

  4. Christian [#]

    Joder menos mal, que has escrito este post…, te debo una por el tiempo que me has ahorrado. Muchas gracias!!

  5. CSSLab - Cómo superar IE6-IE7-IE8 (y no morir en el intento) [#]

    […] z-index, soportando canal alpha para archivos PNG, con porcentaje como unidad de medida, con overflow, con pseudo-classes, con min-height, max-height, min-width, max-width… etc, etc, etc. Con eso […]

  6. Rick [#]

    Estuve un buen rato maldiciendo por este tema. Gracias mil por el dato :)

  7. Antonio [#]

    Este post me ha ayudado a resolver ese bug de IE6 para un proyecto. ¿Cuándo podremos eliminar IE6 completamente de nuestras vidas? :)

  8. elo950 [#]

    buenisimo ni se me hubiera ocurrido, gracias :)

  9. Gero [#]

    Gracias me sirvio de mucho, mil gracias!!!!

  10. Oscar [#]

    Excelente!! Antes lo hice una vez luego de mil dolores de cabeza y lo descubrí solito, pero como siempre no lo apunté y no lo recordaba. Gracias!!

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab