Возникли проблемы с наведением: после эффекта в IE8

Question

Я пытался реализовать эффект css на этой странице здесь: http://sixrevisions.com/css/snazzy-hover-effects-using-css/

У меня все работает нормально, кроме исправления, которое он выложил для IE8;Я добавил условный код, чтобы исправление использовалось только <= IE8 и, следовательно, не включало сброс CSS3 для обычных браузеров.Тем не менее, исправление, похоже, не сработало, все, что я вижу, это текст и текст, завернутый в это. </p>

Вы можете увидеть рабочие примеры здесь: http://www.thecssninja.com/demo/css_hover2/

Мой примерЯ установил здесь: http://www.condorstudios.com/example.html

Есть идеи, почему у меня не работает?Единственные реальные отличия, которые я вижу, это то, что он использует списки, и его теги a установлены как blocks, я пробовал это, но это портит мой макет.

Answer 1

Я думаю, это потому, что вы добавили (и применили стиль) к элементу между контейнером и изображением (<span class="overlay">. Я думаю, что это мешает позиционированию в IE8. Я сделал простая демонстрация jsfiddle , которая работает в Chrome и IE8, на основе исходного примера. Извините, у меня нет IE9 или выше, поэтому я не могу проверить, будет ли это работать.

Единственная проблема, которая у меня былабыло то, что :hover оверлейный элемент был слишком широким, поэтому я добавил left:0;right:0 к классу. Это может быть не совсем то, что вы ищете, но я надеюсь, что это поможет: -)