For some reason, Internet Explorer 7 does some pretty funky things, and has several known bugs with it’s rendering engine that drive web developers like me crazy. While most of the known bugs occur in relatively obscure situations and go largely unnoticed, there are a few that really stick out and cause web developers to waste many hours trying to fix them. The way IE7 renders z-index stacking orders is one of them.
One way to fix many of the issues with IE7 is to dynamically reverse the default z-index stacking order of the elements on your page. This will ensure the elements higher in your HTML source will also have a higher z-index order on your page, solving most of the IE stacking issues.
If you’re using
jQuery (the best Javascript library there is), here’s the quick fix:
1
2
3
4
5
6
7
| $(function() {
var zIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
|
Comments