Corrigiendo bug z-index en ie7 con jQuery

Hace poco, terminé de maquetar el boceto de una tienda online que estamos montando en Logocomunica. El boceto requería un mini carrito en el header que se mostrara cuando el usuario pasara por encima el ratón. Todo funciona perfectamente en todos los navegadores, excepto, claro está, en internet explorer 7.

En esta ocasión, este maravilloso software decidió que el carrito debía mostrarse siempre por debajo de las capas con el atributo z-index inferior, saltándose a la torera lo que le indicaba:

Después de unas tres horas creyendo que el problema estaría en mi código CSS y cambiando y volviendo a cambiar positions, z-index y demás atributos, se me ocurrió que el problema podía ser iE7. Y efectivamente iE7 tiene un bug cuando trata los índices de capas asignados mediante z-index. + info iE7 bug z-index

Tras perder tanto tiempo en este problema opté por una solución rápida proporcionada por Vance Lucas en la que recorre todo el dom de arriba a abajo asignando a cada div un z-index, empezando por 1000 y restandole 10 a cada div interno, con lo que los div superiores tendrán un z-index superior a los inferiores.

Solución no ideal, pero efectiva. El carrito ahora queda como en todos los navegadores modernos:

Dios salve a jQuery! Mi consejo, recomienda a todo el mundo que actualice su navegador y que si eso se cambien a un navegador que no me mate por dentro cada día…

nota mental: siempre pensar que el fallo es de iE7 antes de romperme los cuernos

+info: http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

3 opiniones en “Corrigiendo bug z-index en ie7 con jQuery”

Deja un comentario

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