IE6, z-index i <select />

Internet Explorer 6 to ciągle popularna przeglądarka, szczególnie w USA. Developing stron, kompatybilnych z dziełem Microsoftu jest często swoistym slalomem między jego niedoskonałościami. Jedną z nich jest sytuacja, kiedy <div /> pozycjonowany absolutnie umieszczony jest nad elementem <select />. IE6 niestety nie rozpoznaje poprawnie z-index dla tagów select, co w konsekwencji odbija się czkawką w wyglądzie naszej strony. Na szczęście istnieje sposób na ominięcie tego nieszczęsnego feature.

Powiedzmy, że dysponujemy takim dokumentem HTML:

<div style="position: absolute; height: 200px; width: 200px; background: #A6A6A6; top: 2px; left: 2px;"></div>
<form>
	<fieldset>
		<select><option value="1">foobar</option></select>
	</fieldset>
</form>

Sytuacja bardzo komplikuje się, kiedy uruchomimy stronę w IE6:

Jak ominąć tego typu problem?

Po pierwsze, dodajemy dodatkowy element <iframe /> tylko dla IE6:

<div style="position: absolute; height: 200px; width: 200px; background: #A6A6A6; top: 2px; left: 2px;">
	<!--[if lte IE 6.5]><iframe></iframe><![endif]-–>
</div>
<form>
	<fieldset>
			<select><option value="1">foobar</option></select>
	</fieldset>
</form>

Następnie dodajemy odpowiedni kod CSS:

iframe
{
	display:none;
	display/**/:block;
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	filter:mask();
	width: 200px;
	height: 200px;
}

Działa!

Więcej o problemie znajdziesz w sieci.