IE7 CSS Z-Index выпуск в режиме quirks

Я пытаюсь разобраться в этом уже больше суток, так что любая помощь будет оценена. У меня есть меню Suckerfish, которое состоит из ul/li. я пытаюсь добавить некоторые индикаторы прокрутки сверху вниз в мое меню. В моем примере у меня есть синий и зеленый индикатор, которые просто помещены в меню на данный момент. Эти индикаторы - просто еще один LI внутри UL, но с другим стилем. Я расположил их абсолютно с неподвижным верхом. Если вы посмотрите на пример с помощью firefox и наведите курсор мыши Бла отчеты вы можете увидеть 2 индикатора появляются.

Http://inthemind.com/test/test.html

Если вы откроете его в IE7 и наведете курсор на отчеты Blah, они не появятся. Но затем, если вы наведете курсор на один из подпунктов (т. е. соответствие), когда это подменю расширится, индикаторы действительно станут видимыми. Я не могу понять, что меняется, чтобы индикаторы появлялись, когда подменю расширяется.

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

Спасибо, Рауль

P. s) Я должен использовать режим quirks

Обновление Поэтому я сузил его до того, что IE не будет разрешать абсолютные позиционированные элементы, потому что ul скрыт, а IE не возвращается и не пересчитывает позиции, когда ul становится видимым.Если я жду, пока ul не станет видимым, то я повторно назначаю класс индикаторам, чтобы сбросить позиционирование на элементах, которые, кажется, заставляют их показывать вверх. Это не идеально, потому что теперь мои индикаторы не исчезают вместе с меню, а появляются постфактум.

Еще какие-нибудь советы ?

3 2
html css z-index quirks-mode

3 ответа:

Взгляните на это это сработало для меня некоторое время назад. Хотя и не уверен на 100%, что его то, что УР ищет, может быть полезно кому-то

0

Пара вещей, которые нужно иметь в виду:

Все ваши Z-индексированные элементы должны быть position: relative или position: absolute, иначе IE 6 и 7 не будут корректно их обрабатывать.

Также, т. е. 6 и 7 относятся к Z-индексу относительно его родственных элементов, а не ко всем элементам. ex = > 

<div style="z-index: 2;">
  <div id="d1" style="z-index: 1000"></div>
</div>
<div style="z-index: 1;">
  <div id="d2" style="z-index: 2000"></div>
</div>

В этом примере #d1 будет выглядеть #d2.

Вы также можете настроить порядок родственных элементов в DOM, чтобы получить желаемый порядок Z.

Если вы используете jQuery, вот потенциальное быстрое решение =>
http://thepalmcivet.com/post/121898767/fixing-internet-explorers-z-index-bug-with-jquery

0

Ну, я понял это для тех из вас, кто заинтересован. Что в конечном итоге происходит в IE, так это то, что если родительский элемент изменяется с display: none на display: block, абсолютно позиционированные дочерние элементы никогда не обрабатываются в механизме компоновки, поэтому они никогда не получают свои начальные смещения.

Итак, что вам нужно сделать, это установить родительский экран: блок, сбросить класс на индикаторе LI, чтобы механизм компоновки включился, а затем вы должны заставить механизм компоновки выложить все обвинять offsetTop. После того, как элементы были расположены, мы можем установить родительский элемент обратно на дисплей: нет.

Причина принудительного обновления механизма компоновки заключается в том, что IE будет объединять все изменения стиля до тех пор, пока javascript не закончит, что означает, что смещения никогда не будут пересчитаны.

Вот код, который исправил эту проблему: 

if ($.browser.msie && $.browser.version <= 7) {
    var il = $ul.data('indicatorLayedOut');
    if (il == null) { // We only have to do the layout once
        var $ind = $ul.find('>.indicator');
        $ul.css('visibility', 'hidden').css('display', 'block');

        // Force IE to re-style the indicators. If we omit this then the layout engine
        // will not update the position and cause the indicators to not show up
        $ind.addClass("indicator");

        // We then have to iterate through
        // and pull the offset so we can
        // force a dom update
        $ind.each(function() {
            var oy = this.offsetTop, ox = this.offsetLeft;
            //console.log("X: " + ox + ", Y: " + oy);
        });
        $ul.css('display', 'none').css('visibility', 'visible');

        $ul.data('indicatorLayedOut', true);
    }
}
0