Абсолютно позиционируемый DIV поверх SELECT

Довольно известная бага IE6. Заключается в том, что если накрыть SELECT дивом, то SELECT ВСЕГДА отрисовывается поверх, несмотря ни на какие z-index.

Причина
Выдержка из MSDN: This element is a windowed control and does not support the z-index attribute or zIndex property. Иначе говоря SELECT при обработке страницы заменяется виндовым контролом и ему глубоко накласть на z-index;

Постановка задачи
Сделать так чтоб SELECT отображался корректно под DIV'ом

Решение
1. Написать собственный класс, на основе использования слоев, который заменит собой SELECT
2. Детектить браузер c помощью скрипта, и делать SELECT'у style.display = "none"
3. Накрывать SELECT iframe'ом. Но это не всегда возможно, особенно если DIV должен быть полупрозрачный.
4. Воспользоваться скриптом, который дивным образом решает эту проблему. WCH.
А теперь пример кода:


<script type="text/javascript" src="scripts/WCH.js"></script>

<style>

#al {

font-weight: bold;

font-size:12px;

color: #fff;

background-color: #900;

padding: 20px;

border: 1px solid #000;

width: 100px;

height: 100px;

position: absolute;

left: 200px;

top:70px;

z-index: 10;

}

</style>

<script type="text/javascript">

function pageload() {

WCH.Apply('al');

}

if (window.attachEvent) {

window.attachEvent("onload", pageload);

}

</script>

<div id="al">Layer with pos:absolute and z-index:10</div>

<p>

<select style="width:500px;">

<option value="Fractions" selected="selected">Option-1</option>

<option value="Decimals">Option-2</option>

<option value="American">Option-3</option>

</select>

</p>

<p>

<select style="width:500px;">

<option value="Fractions" selected="selected">Option-1</option>

<option value="Decimals">Option-2</option>

<option value="American">Option-3</option>

</select>

</p>

Лекарство взято отсюда. Пример там же.