Подтвердить что ты не робот

IE8 z-index до и после селекторов css

Это очень неприятно....

http://jsfiddle.net/RRnm8/

хорошо работает в каждом браузере, за исключением IE8...

он должен отображаться следующим образом:

правильная версия http://f.cl.ly/items/4410273m1G1m1O2U0K0a/Screen%20shot%202011-04-04%20at%2016.40.54.png

Но в IE8 вы получите следующее: '(

неправильная версия http://f.cl.ly/items/2e351L0G3y2H1O1g1a1L/Screen%20shot%202011-04-04%20at%2016.41.41.png

Итак, вопрос в том, как заставить это нормально работать в IE8?

Пожалуйста, предоставьте ответ в качестве реального рабочего примера в jsfiddle...

У этого собеседника есть такая же проблема. Он не получил ответа, но этот, который явно не работает, поэтому мой добрый запрос на рабочий пример, демонстрирующий его на jsfiddle

Заранее спасибо:)

Ответ 1

Эта проблема, похоже, связана с тем, как IE обрабатывает стек z-index. Где FF и Chrome обрабатывают элементы с индексом z-index по всему документу, в IE, как вы, вероятно, знаете, z-index сначала основан на родительском индексе z.

Я думаю, что: перед контентом эта проблема осложняется и, несмотря на то, что она имеет отрицательный индекс z, находится в родительском элементе. Элемент, по которому его индекс сравнивается, не является родительским div, как это было бы в FF или Chrome, но содержимое внутри элемента div, p. Элемент p не является блоком и также разделяет z-индекс родительского div, поэтому он не может быть ниже: перед контентом.

Решение состоит в том, чтобы сделать внутренний div или дать относительное позиционирование и стиль элемента p.

Смотрите: http://jsfiddle.net/RRnm8/3/