Проблеми з розміщенням Z-індексу IE7

163

Я виділив невеликий тестовий випадок z-indexпомилки IE7 , але не знаю, як це виправити. Я 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>

css internet-explorer-7 z-index

— резна
джерело

Якщо ви шукаєте роботу, і ви не переставляєте всі свої HTML- файли,

— Nasaralla,

268

Z-індекс не є абсолютним вимірюванням. Можливо, що елемент із z-індексом: 1000 знаходиться поза елементом z-індексом: 1 - до тих пір, поки відповідні елементи належать до різних контекстів укладання .

Коли ви вказуєте z-індекс, ви вказуєте його відносно інших елементів у тому ж контексті укладання, і хоча абзац специфікації CSS на Z-індексі говорить, що новий контекст укладання створюється лише для позиціонованого вмісту з z-індексом, відмінним від авто (тобто весь документ повинен бути єдиний контекст штабелювання), ви зробили побудувати позиціонується термін: на жаль , IE7 трактує позиціонується контент без Z-індекс як новий контекст стека.

Якщо коротко, спробуйте додати цей 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-індекс дозволяє чітко визначити, як речі перетинаються, навіть без z-індексу порядок відшарування добре визначений . Нарешті, в IE6 є додаткова помилка, яка спричиняє вибіркові скриньки та рамки кадрів поверх всього іншого.

— Еймон Нербонна
джерело

4

нарешті вирішив це :) - відносна позиція насправді неприємна, тому я якось прийняв вашу ідею без елементів «конверта» - це, здається, вирішить проблему, а також працювати - просто потрібно переробити трохи коду для коробки пропозицій - thx a лот

— rezna

6

Є три різні речі, які впливають на те, як елементи перетинаються один з одним: укладання контекстів, порядок джерел та порядок малювання. Найбільш очевидні проблеми виникають при роботі зі складанням контекстів - знання двох інших допоможе вам розібратися в більш езотеричних гатах. Джерело: CSS-Discuss Wiki.

— rjb

2

додати z-індекс до батьківського елемента - чудове рішення

— Данюн Лю

2

Я тебе люблю. Додано позицію: відносна та z-індекс: 500 моєму батькові, і це виправлено!

— Аймерік Гаурат-Апеллі

2

Я склав загадку цієї проблеми із коментарями, які демонструють рішення. jsfiddle.net/fNcGu/3

— Крістофер Джонсон

15

http://www.vancelucas.com/blog/fixing-ie7-z-index-isissue-with-jquery/

$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
    $(this).css('zIndex', zIndexNumber);
    zIndexNumber -= 10;
});
});

— ніксис
джерело

прочитавши «правильне» рішення вище, я спробував сформулювати рішення для своєї значно складнішої проблеми, ніж тривіальна в питанні. тоді я кинув цю відповідь, і це спрацювало як шарм. якщо рішення вище є правильним, це, безумовно, легке. Дякую!

— Ландон

11

У позиціонованих IE елементах генерується новий контекст укладання, починаючи зі значення z-індексу 0. Тому z-index не працює належним чином.

Спробуйте надати батьківському елементу більш високе z-індексне значення (може бути навіть вище, ніж саме дочірнє значення z-індексу), щоб виправити помилку.

— ed1nh0
джерело

1

Дякую. Це рішення працювало для мене, даючи z-індекс батьківського контейнера, не обов'язково вище, ніж дитячий z-індекс.

— neelmeg

4

Я зіткнувся з цією проблемою, але у великому проекті, де потрібно було запросити зміни в HTML, і це стало цілою проблемою, тому я шукав чисте рішення css.

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

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

Що вирішило проблему та зберегло правильну функціональність шарування.

Відчуває себе трохи хитким, але працював так, як потрібно.

— lukeroxout
джерело

3

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

div {z-індекс: 10; }

Для z-індексу непов'язаних дівок, наприклад навигації, показувати над повзунком. Я не міг просто додати z-індекс до самого слайдера div.

— eBar Рішення
джерело

Я виявив, що це, крім того, html {z-index:1; position:relative;}дозволило меню переходити зображення каруселі на IE.

— bassplayer7

2

Якщо вищезгадане вище 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;
});

— сфероїд
джерело

Дуже хороша! Виявлення функцій - це безумовно шлях.

— Джейсон

1

Це виглядає не як помилка, а лише для того, щоб розібратися в стандарті css. Якщо для зовнішнього контейнера не вказано z-індекс, але внутрішній елемент вказав більш високий z-індекс. Таким чином, посилання контейнера може перекривати високий z-індексний елемент. Навіть якщо так, це відбувається лише в IE7, але IE6, IE8 і Firefox все в порядку.

— c2j
джерело

0

Загалом, в IE6 деякі UI-елементи реалізовані з нативними елементами управління. Ці елементи керування відображаються в абсолютно окремій фазі (вікно?) І завжди з'являються над будь-якими іншими елементами управління, незалежно від z-індексу. Вибіркові скриньки - ще один такий проблемний контроль.

Єдиний спосіб вирішити цю проблему - це сконструювати вміст, який IE надає як окреме "вікно" - тобто ви можете розмістити поле вибору над текстовим полем, або, що більш корисно, за кадром iframe.

Коротше кажучи, вам потрібно поставити такі елементи, як, наприклад, меню, у iframe, щоб IE розмістив ці вбудовані елементи управління інтерфейсом.

Це потрібно було б виправити в IE7 (див. Http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx ), але, можливо, ти працюєш у якомусь режимі сумісності?

— Еймон Нербонна
джерело

я знаю про помилку z-індексу IE6 - і це виправлено - але є ще одна проблема з відносно / абсолютно позиційними елементами / входами в IE7 (що фіксується в IE8) - я знайшов пару рішень (граючи з z-індексами), але жоден з них не працював - тому я прошу там ... У всякому разі, за відповідь.

— rezna

0

Ця помилка здається дещо окремою проблемою, ніж стандартна помилка IE з окремим контекстом укладання. У мене була подібна проблема з декількома складеними входами (по суті, таблиця з автокомплектором у кожному рядку). Єдине знайдене нами рішення - дати кожній клітині зменшувати значення z-індексу.

— Джеремі Кауффман
джерело

0

Якщо ви хочете створити спадне меню і маєте проблему з z-індексом, ви можете вирішити його, створивши z-індекси з однаковим значенням (z-index: 999; наприклад). Просто поставте z-індекс у батьківські та дочірні діви та це вирішить проблему. Я вирішую проблему з цим. Якщо я покладу різні z-індекси, звичайно, він покаже мою дочірню поділку над моїм батьківським ділом, але, як тільки я захочу перенести мишу з вкладки меню на розділ підменю (випадаючий список), він зникне ... тоді я ставлю z-індекси того самого значення і вирішую проблему ..

— Марко
джерело

0

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

— Лукас
джерело