12:01 

Internet Explorer и z-index

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
Так как искала долго, то поделюсь и сохраню на память статью.
Периодически все же приходится поддерживать ИЕ7 и это про него:

ИЕ воспринимает z-index не совсем так, как все остальные браузеры.
z-index работает?
Да, совершенно точно работает. Берем два блока, с position:absolute (для работы z-index нужен либо relative либо absolute)
Задаем им обоим что-то такое:

Блок с большим z-index отобразится поверх блока с меньшим z-index. Все как бы работает. И в IE в том числе.

работает, но…
Классическая обстановка для «проблемы в вёрстке».

В коде идут подряд два блока с position:relative. Например, два блока новости, или блоки вроде header и content. В relative ничего необычного нет, может добавили для absolute блоков внутри, или для хаков.
Как-то так:

И теперь, например, в одном из них появляется всплывающее окошко, или попап, или выпадающее меню:

И такой вот дизайн:

Будь вы мной, вы написали бы такой CSS:

Если добавить цвета и размеры, все отобразится и правда так, как в дизайне.
Но, разумеется, не в ИЕ.

Там это будет выглядеть так:

Я это понимаю так: ИЕ сравнивает не только z-index блоков, но и z-index их родителей. Причем родительский важнее. В моем примере роль «родительского z-index» исполняет просто последовательность блоков в коде. Какие блоки дальше в коде, те и отобразятся поверх.

Я сделал специальный пример, смайлик из acid-теста будет улыбаться всем браузерам кроме ИЕ. (его улыбка зависит от этого вот поведения с relative блоками)

решение?
Убрать position:relative для .entry
Задавать разные z-index для .entry. В случае новостей это невозможно, они ведь генерируются симметрично. Однако когда у нас header и content, вполне подходит.
Может быть есть еще?

В конце
Мне не хочется называть это багом, поскольку для него требуется куча обстоятельств, скорее всего не описанных w3c. (или описанных?)
Поведение имеет место в IE5-7. ©

@темы: Я, Ссылки, Рабочие заметки, Наблюдения

URL
Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

Катастрофически тебя не хватает мне...

главная