Internet Explorer 6 Z-index проблема

Question

У меня есть всплывающее окно DIV (сработало js), которое показывает изображение.Очень просто.

Проблема в том, что этот DIV должен перекрывать SELECT, которые находятся под DIV.

Он работает во всех браузерах, кроме IE6.

Когда jsсрабатывает, и отображается DIV, z-индекс не прав, потому что раскрывающиеся списки SELECT перекрывают части DIV.

Это только в IE6.

У кого-нибудь есть подсказка?

Вот CSS для DIV:

 .pop_komm {
position: absolute;
z-index: 20;
height: 52px;
width: 208px;
left: 760px;
top: 239px;
display:none;
zoom:1;
 }

Я попытался удалить зум и редактировать некоторые из CSS выше без удачи.

Почему это не такработает в IE6?

Спасибо

Answer 1

Если я правильно помню, это довольно известная ошибка: IE6 игнорирует z-index для выбранных элементов, то есть всегда перед всеми другими элементами, независимо от их z-index.

Основной метод заключается в том, чтобы либо скрыть рассматриваемый select, когда вам нужно что-то поверх него с помощью Javascript, либо наложить «1009 *« прокладку », чтобы скрыть его. См. Этот вопрос для получения более подробной информации: шимминг iframe или ie6 (и ниже) выберите ошибку z-index

Answer 2

У меня тоже была эта проблема.Единственный способ, который я знаю, чтобы исправить это скрыть все selects на вашей странице.Затем покажите их снова, когда всплывающее окно закроется.

---

РЕДАКТИРОВАТЬ

Я предлагаю вам использовать jquery, но если вы не хотите, здесь идет 100% решение javascript(без jquery)

См. мой код в jsfiddle .

JS

var d = document;
function showPopup(){
    d.getElementById("popup").style.display = "block";
    updateSelects(d.getElementsByTagName("select"), "none");
}
function hidePopup(){
    d.getElementById("popup").style.display  = "none";
    updateSelects(d.getElementsByTagName("select"),  "inline");
}

function updateSelects(itens, value){
    for (i=0; i < itens.length;  i++) {
        itens[i].style.display = value;    
    }    
}

HTML

<select>
    <option>one</option>
    <option>two</option>    
</select>

<input type="button" onclick="showPopup()" value="show"/>

<div id="popup">
    This is my popup
    <input  type="button" onclick="hidePopup()" value="hide"/>
</div>

Answer 3

select элементы и iframe появляются поверх всего в IE. Вам нужно будет использовать iframe для противодействия выпадающим спискам.

http://plugins.jquery.com/project/bgiframe

Answer 4

Если вы не против добавить в свой проект jQuery, поскольку существует плагин jQuery, специально разработанный для решения этой проблемы: http://docs.jquery.com/Plugins/bgiframe. Вы просто вызываете функцию для элементов, которые хотите исправить, и она применяется iframe взломать их для вас.

Дополнительная информация; http://brandonaaron.net/code/bgiframe/docs