Хочу написать краткую заметку про баг в IE8 при использовании псевдоэлементов after или before. Как именно глючит видно из картинки т.е. блок который абсолютом по логике вещей должен быть НАД картинкой, а он оказался ПОД ней. Попытки проставить для блока с абсолютом выше z-index не помогают, хотя казалось бы должны.
В самом деле все просто, когда знаешь как фиксить. Если не знаешь, то потеря времени и какого-то количества нервных клеток гарантированна. Особенно когда все сделано, сроки горят и надо сдавать срочно проект, а в ИЕ8 оно не работает =).
Лечится, кто бы мог подумать, отрицательным значением z-index для картинки(или блока) + position:relative;.
<a href="#" class="block bestseller"> <img src="box.jpg" alt="" /> </a>
Лечение:
.block img {z-index:-1; position:relative;}
З.Ы. К стати этот баг виден в самом ИЕ8 и ИЕТестере, но если открыть ИЕ10 и переключиться в «Режим браузера IE8″ — бага нет. :)
Архив с примером во вложении.
Прикрепленный файл: after_before.rar (16.14 Kb)
да, есть такая бага. В некоторых случаях z-index надо также дать самому блоку. Иногда, в сложных ситуациях, «-1″ использовать нельзя, тк улетает контент совсем не туда. Тогда делать нечего, либо отказываемся от псевдо, либо пилим для ие отдельный код.
плюс IE8 бажит с реакцией псевдоэлемента при ховере, если он навешен не на < a >. Например, border меняет,а фон-нет. :))
ну а вообще с псевдоэлементами приколов много не только в ие…