Snippet: Arreglar el Z-Index en IE7 con jQuery o MooTools

Por alguna razón malvada, Internet Explorer 7 hace algunas cosas raras (además de tener una larga lista bugs conocidos en su motor) que siempre se las ingenian para volver a los web developers locos. Mientras algunos errores ocurren de forma oscura y dificil de notar, hay algunos que causan que pasemos horas tratando de arreglarlos. La forma en que IE7 renderiza el orden del z-index es una de ellas.

Una de las formas de arreglarlo es cambiando dinámicamente el orden por default de los elementos de la página. Esto asegura que los elementos en el código HTML tengan el índice adecuado, resolviendo la mayoría de los problemas que causa IE7.

El modo de hacerlo usando jQuery sería algo como:

$(function() {
	var zIndexNumber = 1000;
	$('div').each(function() {
		$(this).css('zIndex', zIndexNumber);
		zIndexNumber -= 10;
	});
});

Con esto básicamente lo que hacemos es comenzar con un z-index de 1000 y decrementar el indice de cada div de la página en tractos de 10, es decir, el primer elemento tendrá un z-index de 1000, el segundo 990 el tercero 980 y así sucesivamente. Notá que el selector de jQuery encuentra todos los divs con el codigo “$(’div’)”, usando la misma syntaxis que los selectores de CSS, nada dificil.

Ah… y así se hace lo mismo pero con MooTools, por si estás usando esa biblioteca:

if(Browser.Engine.trident){
	var zIndexNumber = 1000;
	$$('div').each(function(el,i){
		el.setStyle('z-index',zIndexNumber);
		zIndexNumber -= 10;
	});
};

Saluuú.