IE7 CSS Z-Index проблема в режиме причуд - PullRequest
Новая
       9

IE7 CSS Z-Index проблема в режиме причуд

2 голосов
/ 10 августа 2010

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

http://inthemind.com/test/test.html

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

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

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

псЯ должен использовать режим причуд

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

Любые другие советы?

Ответы [ 3 ]

0 голосов
/ 10 августа 2010

пара вещей, о которых следует помнить:

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

Кроме того, IE 6 и 7 обрабатывают z-индекс относительно своих элементов sibling , а не всех элементов.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 голосов
/ 11 августа 2010

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

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

Причина, по которой принудительно обновляется механизм компоновки, заключается в том, что 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 голосов
/ 10 августа 2010

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

...