другой "z-index не работает" в IE> 7, не может найти ответ после исследования - PullRequest
Новая
       17

другой "z-index не работает" в IE> 7, не может найти ответ после исследования

0 голосов
/ 20 марта 2012

Я искал повсюду, нашел много статей, объясняющих рабочие раунды для проблем IE 7,8 и 9 z-index, но ни один из этих случаев не помог мне решить проблему.

Проблема заключается в том, что у меня есть контент в середине страницы, с которым пользователь может взаимодействовать, но я не хочу, чтобы пользователь мог взаимодействовать через 2 секунды после загрузки страницы (мне не нужна помощь с этим).Поэтому я использую блокировщик в качестве решения, div, который расположен над содержимым, анимируемым в HTML, с абсолютной позицией и охватывает взаимодействие с пользователем, поэтому вы не можете анимировать при наведении мыши.

Это работает в Chrome иFirefox, но все IE имеют проблемы с z-индексом.

Я убедился, что каждый родительский элемент имеет позицию относительного или абсолютного, и даже попытался сделать родительские контейнеры более высоким индексом и наоборот.Кто-нибудь сталкивался с подобной проблемой?

Я не могу показать код для личного дела, но надеюсь, я достаточно подробно объяснил это.

Есть вопросы, дайте мне знать.

1 Ответ

2 голосов
/ 21 марта 2012

В IE я заметил, что даже когда родительские элементы устанавливаются в относительные и / или абсолютные позиции и имеют их z-index ниже, чем div-блокатор (что является нормальным исправлением), div-блокатор все еще складывается как отдельный элементиндекс, поэтому не укладываются поверх других элементов выше.Еще одна проблема, которую я заметил, заключается в том, что когда вы устанавливаете цвет фона для блокировщика, стек z-index работает, и вы не можете взаимодействовать с нижними элементами z-index.НО, когда вы устанавливаете пустой блокировщик на прозрачный, z-index не будет складываться с другими элементами (ошибка).

Вот Обход для всех браузеров IE *, если вы пытаетесьиспользовать пустой div для блокировки взаимодействия с пользователем (в противном случае вышеприведенное должно работать):

CSS 

#blocker {
    position:absolute;
    width: 100%;
    height: 200%;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    z-index:9999;
    background-image: url('/cont-img/Transparent.gif');
    background-repeat:repeat;
}
  1. Загрузитьпрозрачный gif, который работает как непрозрачность 0, но для всех браузеров IE: transparent.gif
  2. Повторите фон gif, чтобы он повторял x & y над вышеуказанными элементами

HTML 

    <!-- place empty blocker div BELOW content trying to block -->
    <div id="blocker"></div>
...