189_37_orХочу написать краткую заметку про баг в 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)

Оценить:|
  
Комментировать
Раздел: CSS    
Просмотров: 3355
Комментарий (1)
  1. cssfish
    21.07.2013 в 18:26

    да, есть такая бага. В некоторых случаях z-index надо также дать самому блоку. Иногда, в сложных ситуациях, «-1″ использовать нельзя, тк улетает контент совсем не туда. Тогда делать нечего, либо отказываемся от псевдо, либо пилим для ие отдельный код.

    плюс IE8 бажит с реакцией псевдоэлемента при ховере, если он навешен не на < a >. Например, border меняет,а фон-нет. :))

    ну а вообще с псевдоэлементами приколов много не только в ие…

Оставить комментарий