Internet explorer 6 Задача Z-index

У меня есть всплывающее окно DIV (js triggered), которое показывает изображение. Очень просто.Internet explorer 6 Задача Z-index

Проблема заключается в том, что этот 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?

спасибо

источник

2010-09-18 Anonymous

Любовь, когда люди просто найти эту ошибку, что мы имели дело с за последние 10 лет. :) – epascarello

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

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

источник

2010-09-18 17:18:42

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

EDIT

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

Смотрите мой код в jsfiddle.

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>

источник

2010-09-18 17:17:57 Topera

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

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

источник

2010-09-18 17:18:40

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

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

источник

2010-09-18 17:22:07

Internet explorer 6 Задача Z-index

ответ

Смежные вопросы