Ошибка выпадающего z-индекса в IE - PullRequest
Новая
       24

Ошибка выпадающего z-индекса в IE

3 голосов
/ 16 марта 2010

У меня проблема с выпадающим меню под IE (6 и 7).

http://www.amaconsulting.pl/promocje.html

Как видите, раскрывающийся список скрывается за основной областью содержимого в IE.

Это известная ошибка, и общий совет - установить z-index для областей заголовка и содержимого, чтобы IE знал их «место», объясненное в статье здесь: http://bit.ly/coSPcI

Я установил z-index для .header div на 20, а .featured, .content, .primary, .main на 1, пытаясь найти правильный div для решения проблемы. Хотя раскрывающийся список перестал скрываться за элементом .featured, он все еще скрывается за основными элементами содержимого (либо .primary, либо .main, .secondary в порядке).

Z-индексы для этих div-ов задаются в отдельной таблице стилей, т.е. .css, на случай, если кто-то их будет искать.

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

Ответы [ 3 ]

3 голосов
/ 15 декабря 2011

Ok оригинальное решение здесь - Швейцарский кредитный сайт . Это работает, но использует сложное решение z-index. Вот очень простое и улучшенное решение - Галерея изображений Jeyjoo Это работает в IE6 +, Firefox, Opera, Safari и Chrome

Решение

HTML 

<div id="container_page" class="container_page">
  <div id="container_header" class="container_header">
    NAV BAR GOES HERE
  </div>
  <div id="container_body" class="container_body">
    ...body text...
  </div>
</div>

CSS 

#container_page #container_header {position:relative;z-index:2;}
#container_page #container_body {position:relative;}

почему это работает

Вы должны сообщить IE, как эти два div связаны друг с другом.

0 голосов
/ 14 декабря 2011

Я управлял работой z-index в подменю - Chkredit - швейцарский кредитный сайт Работает во всех версиях IE и является легким и 100% CSS (без JavaScript).

IE неправильно использует z-index. Проверьте z-index в CSS-коде сайта. Вам нужно будет поставить z-index -1 на элементы, за которыми скрывается ваше меню.

Я сейчас работаю над точно такой же проблемой для моей собственной галереи изображений (перейдите на страницу "top image") - Галерея изображений jeyjoo . Когда я разберусь с этим, я опубликую полное решение здесь.

0 голосов
/ 16 марта 2010

В IE, если абсолютно позиционированный элемент имеет z-индекс, он содержит относительно позиционированный элемент, который должен указывать z-индекс (z-index: 1), чтобы абсолютно позиционированный элемент мог появляться поверх других относительно позиционированные элементы.

Так что я думаю, что вам нужно дать вашему ul.nav z-index 1. Я на самом деле писал об этом на моем блоге .

Обновлен: Поэтому, если я изменю стиль видимости скрытого ul на visible, он появится над div, как и должно быть, до тех пор, пока ul.nav имеет положительное значение z-index. Поэтому я думаю, что это как-то связано с тем, как ваш JS отображает выпадающее меню из этого скрытого UL. Если у меня нет всего вашего HTML / CSS / JS, я не могу решить эту проблему, поэтому я могу лишь указать вам правильное направление, и я думаю, что понимание этой страницы очень вам поможет.

...