Выпадающий список CSS, показанный ниже раскрывающегося списка, IE6, IE7, ошибка абсолютного позиционирования - PullRequest
Новая
       34

Выпадающий список CSS, показанный ниже раскрывающегося списка, IE6, IE7, ошибка абсолютного позиционирования

3 голосов
/ 17 мая 2011

Я столкнулся с одной из самых сумасшедших проблем, которые я когда-либо встречал в css ...

У меня есть два горизонтальных выпадающих списка CSS-jQuery, один вверх и один ниже, отображающий раскрывающийся список при нажатиина нем.

Проблема возникает, когда я нажимаю верхний выпадающий список в IE6 и IE7, и элемент с абсолютным позиционированием переходит относительно элементов с относительным позиционированием.В верхнем раскрывающемся списке (абсолютном) показана последовательность раскрывающегося (относительного) ниже.

JavaScript: 

$("button").click(function(e){
    $(".menu").hide();
    $(this).siblings(".menu").show();
    e.stopPropagation()
});
$(document).click(function(){$(".menu").hide()});

HTML: 

<div class="top">
    <div class="dropdown">
        <button>Dropdown1 v</button>
        <div class="menu">
            <a href="#link">Option a</a>
            <a href="#link">Option b</a>
            <a href="#link">Option c</a>
        </div>
    </div>
    <div class="dropdown">
        <button>Dropdown2 v</button>
        <div class="menu">
             <a href="#link">Option d</a>
             <a href="#link">Option e</a>
            <a href="#link">Option f</a>
        </div>
    </div>
</div>

CSS: 

.dropdown{float:left;display:inline;clear:left;position:relative}
.menu{position:absolute;left:0;top:22px;z-index:1}
.menu  a{display:block}

.menu{display:none;border:1px solid #ccc;padding:3px;background:#ffffe0}

Вот пример:

http://jsfiddle.net/AEBaW/

РЕШЕНИЕ ЗДЕСЬ:

http://jsfiddle.net/AEBaW/2/

Ответы [ 2 ]

4 голосов
/ 17 мая 2011

Существует известная проблема с z-index в IE.Он обрабатывает z-index по-разному для элементов с абсолютным позиционированием, чем для элементов с относительным позиционированием.Как будто у вас есть два набора z-индексов.Вы можете исправить это, используя оболочки с одинаковым позиционированием, если вы не можете заставить все свои элементы использовать одинаковое позиционирование.

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

http://caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/

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

Ошибка индекса z

Исправлена ​​ошибка IE Z-Index?

Internet ExplorerОшибка z-index?

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

jQuery Решения:

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

http://webdeveloper2.com/2010/01/how-to-fix-the-ie-z-index-bug-with-jquery/

0 голосов
/ 17 мая 2011

Когда мне приходилось работать с проблемами IE z-index, лучшим решением, которое я нашел, было убедиться, что каждый отдельный контейнер был частью одного и того же индекса стека.Это означает, что все элементы действуют как слои одного стека.Обычно это делает IE забавным.

Вы можете сделать это, добавив position:relative; z-index:auto; ко всем контейнерам.Вы хотите сделать это до конца, если это возможно.Это должно заставить IE считать все одним стеком, таким образом, правильное расслоение.

...