CSS Rollover: наведенное изображение не переворачивается в IE8

Question

У меня довольно много проблем с IE7, но на этот раз IE8 делает что-то странное.

Следующий фрагмент кода не работает:

<style>
.inschrijven{ display: block;  width: 460px;  height: 150px; background: url("image.png") no-repeat 0 0;}
.inschrijven:hover{background-position: bottom;}
.inschrijven span{display: none;}
</style>

<div style="text-align:center;">
<a href="#" onclick="pageTracker._trackEvent('samenstellen', 'click', 'track');" class="inschrijven"><span>Schrijf u hier in</span></a>
</div>

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

Answer 1

Я не смог найти подобный случай, и каждая другая кнопка, казалось, работала в IE8, но вот мое решение:

Оставьте интервал пустым. Пространства не требуется, не скрывайте его.

Установите отступ для этого диапазона, отрегулированный по размеру изображения:

.inschrijven span {padding:5px 230px 145px;}

Answer 2

Я не уверен, в чем ваша проблема, у меня она отлично работает

, хотя, как другие заметили, ваш диапазон невидим.http://jsfiddle.net/F2XJs/2/

http://jsfiddle.net/F2XJs/3/ все работает, и прокомментировано, а также выполняет ваши требования с текстом без использования span :)

Answer 3

Я думаю, что это невидимо из-за этого CSS:

.inschrijven span{display: none;}

Вы установили <span> внутри своей ссылки, но затем вы сделали ее невидимой с помощью вышеупомянутого CSS, поэтому вы не можете видеть ее и, следовательно, не можете щелкнуть по ней.

Попробуйте удалить ниже CSS и затем посмотрите:

.inschrijven span{display: none;}