feb 9 2010
Sådan fixes IE7’s z-index bug med jQuery
Det er sædvanligvis Internet Explorer, der kræver ekstra opmærksomhed, workarounds og udviklingstid, når man skal gøre et website kompatibelt på tværs af webbrowsere. Jeg har lige spenderet en del tid på at komme omkring en grov renderingsfejl i IE før version 8, der rammer den orden hvori CSS positionerede HTML elementer stables. Jeg er rendt ind i IE’s z-index bug.
Opgaven: En lang række list items skal udstyres med forklaringer i form af drop downs. HTML koden ser således ud.
<ul class="linklist">
<li>
<h4>Overskrift 1</h4>
<a href="#" class="dropdown-trigger">Vis beskrivelse</a>
<div id="beskrivelse-1">
Beskrivende note der falder ned, når man klikker på linket "Vis beskrivelse".
</div>
</li>
<li>
<h4>Overskrift 2</h4>
<a href="#" class="dropdown-trigger">Vis beskrivelse</a>
<div id="beskrivelse-2">
Beskrivende note der falder ned, når man klikker på linket "Vis beskrivelse".
</div>
</li>
</ul>
CSS koden ser således ud.
.linklist li {position:relative;width:270px;}
.linklist li div.hidden {display:none;} /* skjuler div'en, før den aktiveres med jQuery .slideDown() */
.linklist li div {
background:#ddd;
border:1px solid #ccc;
left:0;
padding:6px 12px 12px;
position:absolute;
top:20px;
width:244px;
}
<div> elementet bør således placere sig ovenpå <li> elementerne. Det virker bare ikke i IE før version 8, fordi stakkeordenen er fejlbehæftet. Jeg prøvede at løse problemet ved at definere en lavere z-index på <li> elementerne, end på <div> elementerne, men det løste ikke problemet. De efterfølgende <li> elementer blev stadig vist ovenpå det aktive <div>element.
Efter en del søgning på nettet fandt jeg Vance Lucas’ jQuery-baserede løsning af problemet:
$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
Ideen er, dynamisk at vende standard z-index stakkeordenen af HTML elementerne om. Således sikrer man, at elementer, der ligger højere i kildekoden også har en højere z-index orden på siden, hvilket burde løse renderingsproblemet i IE.
Det løste ikke umiddelbart mit problem. Jeg havde imidlertid andetsteds læst, at man skulle kunne løse problemet ved at give det relativt positionerede omgivende element en højere z-index orden, end det absolut positionerede element.
Det gav mig ideen til også at lave en Vance Lucas jQuery løsning på det relativt positionerede <li> element, men med en højere z-index orden. Altså:
$(function() {
var LizIndexNumber = 1100;
$('li').each(function() {
$(this).css('zIndex', LizIndexNumber);
LizIndexNumber -= 10;
});
var DivzIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', DivzIndexNumber);
DivzIndexNumber -= 10;
});
});
Og voila! Så virker det.
