Проблемы с помехами IE7 Z-Index

Я выделил небольшой тестовый пример ошибки IE7 z-index, но не знаю, как его исправить. Я играю с z-index весь день.

Что не так с z-index в IE7?

Тест CSS:

input {
    border: 1px solid #000;
}

div {
    border: 1px solid #00f;
}

ul {
    border: 1px solid #f00;
    background-color: #f00;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    z-index: 1000;
}

li {
    color: #fff;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

span.envelope {
    position: relative;
}

span.envelope ul {
    position: absolute;
    top: 20px;
    left: 0;
    width: 150px;
}

Тестирование HTML:

<form>
  <label>Input #1:</label>
  <span id="envelope-1" class="envelope">
    <input name="my-input-1" id="my-input-1" />
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
  </span>
  <br><br>
  <label>Input #2:</label>
  <span id="envelope-2" class="envelope">
    <input name="my-input-2" id="my-input-2" />
  </span>
</form>

Ответы

Ответ 1

Z-индекс не является абсолютным измерением. . Элемент с z-index: 1000 может находиться за элементом с z-index: 1 - пока соответствующие элементы принадлежат к различным контекстам стекирования.

Когда вы указываете z-index, вы указываете его относительно других элементов в одном и том же контексте стекирования, и хотя абзац CSS spec на Z-index говорит, что новый контекст стекирования создается только для позиционированного контента с z-индексом, отличным от auto (что означает, что весь ваш документ должен быть одним контекстом стекирования), вы создали позиционный диапазон: к сожалению, IE7 интерпретирует позиционированный контент без z -index это как новый контекст стекирования.

Короче говоря, попробуйте добавить этот CSS:

#envelope-1 {position:relative; z-index:1;}

или перепроектируйте документ таким образом, чтобы ваши промежутки не имели позиции: относительная длина:

<html>
<head>
    <title>Z-Index IE7 Test</title>
    <style type="text/css">
        ul {
            background-color: #f00; 
            z-index: 1000;
            position: absolute;
            width: 150px;
        }
    </style>
</head>
<body>
    <div>
        <label>Input #1:</label> <input><br>
        <ul><li>item<li>item<li>item<li>item</ul>
    </div>

    <div>
        <label>Input #2:</label> <input>
    </div>
</body>
</html>

См. http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ для аналогичного примера этой ошибки. Причина, по которой родительский элемент (конверт-1 в вашем примере) работает с более высоким z-индексом, заключается в том, что тогда все дети конверта-1 (включая меню) будут перекрывать всех братьев и сестер конверта-1 (в частности, конверт-2).

Хотя z-index позволяет вам явно определять, как вещи перекрываются, даже без z-индекса порядок упорядочивания четко определен. Наконец, IE6 имеет дополнительную ошибку, которая заставляет selectboxes и iframes плавать поверх всего остального.

Ответ 3

"В позиционируемых IE элементах создается новый контекст стекирования, начиная с значения z-индекса 0. Поэтому z-index не работает правильно.

Попробуйте предоставить родительскому элементу более высокое значение z-индекса (может быть даже выше самого значения z-индекса childs), чтобы исправить ошибку.

Ответ 4

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

Поместив position:relative; z-index:-1 в мой основной контент, мой заголовок выпадающего контента неожиданно отображается над содержимым тела в ie7 (он уже отображался без проблем во всех других браузерах и в ie8 +)

Проблема с этим была тогда отключена всеми действиями наведения и кликов по всему содержанию элемента с помощью z-index:-1, поэтому я перешел к родительскому элементу всей страницы и дал ему position:relative; z-index:1

Что исправило проблему и сохранила правильную функциональность слоев.

Чувствует себя немного взломанным, но работает по мере необходимости.

Ответ 5

Я обнаружил, что мне нужно было разместить специальное обозначение z-индекса для div в конкретном стилизованном элементе ie7:

div {z-index: 10; }

Для z-индекса не связанных между собой div, например nav, для отображения над слайдером. Я не мог просто добавить z-index самому ползунку.

Ответ 6

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

Быстрый (и, очевидно, рабочий) тест для Modernizr:

Modernizr.addTest('compliantzindex', function(){
    var test  = document.createElement('div'),
        fake = false,
        root = document.body || (function () {
            fake = true;
            return document.documentElement.appendChild(document.createElement('body'));
        }());

    root.appendChild(test);
    test.style.position = 'relative';
    var ret = (test.style.zIndex !== 0);
    root.removeChild(test);

    if (fake) {
        document.documentElement.removeChild(root);
    }

    return ret;
});

Ответ 7

Похоже, что это не ошибка ie, просто для разного понимания стандарта css. Если внешний контейнер не указан z-index, но внутренний элемент указывает более высокий z-индекс. Таким образом, контейнерный брат может накладывать верхний элемент z-index. Даже если это так, это происходит только в IE7, но IE6, IE8 и Firefox в порядке.

Ответ 8

В IE6 в целом определенные элементы пользовательского интерфейса реализованы с помощью собственных элементов управления. Эти элементы управления отображаются в полностью отдельной фазе (окно?) И всегда отображаются над любыми другими элементами управления независимо от z-индекса. Выбор-ящики - еще один такой проблемный элемент управления.

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

Короче говоря, вам нужно поместить "on-hover", например, такие как меню в iframe, чтобы IE помещал эти выше встроенные элементы пользовательского интерфейса.

Это должно было быть исправлено в IE7 (см. http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx), но, возможно, вы работаете в каком-то режиме совместимости?

Ответ 9

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

Ответ 10

Если вы хотите создать раскрывающееся меню и иметь проблему с z-index, вы можете решить его, создав z-индексы того же значения (например, z-index: 999). Просто поместите z-index в родительский и child div, и это решит проблему. Я решаю проблему с этим. Если я поместил разные z-индексы, уверен, он покажет мой дочерний div над моим родительским div, но, как только я хочу переместить мышь из вкладки меню в подменю div (выпадающий список), он исчезнет... тогда я ставит z-индексы одинакового значения и решает проблему.

Ответ 11

Я решил это, используя инструменты разработчика для IE7 (его панель инструментов) и добавив отрицательный z-индекс в контейнер div, который будет ниже того, что другой div.