Техника раздвижных дверей CSS для кнопок, проблема IE8 - PullRequest
Новая
       15

Техника раздвижных дверей CSS для кнопок, проблема IE8

1 голос
/ 10 мая 2010

Я использовал технику раздвижных дверей, объясненную здесь:

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

Только с одним исключением, я решил добавить еще одно изображение для эффекта "зависания".

Мой код хорошо работает для всех браузеров, кроме IE8 (и, возможно, более ранних версий).

a.submit-button: active и a.submit-button: active span просто блокируются при наведении и никогда не работают.

Кто-нибудь знает решение для этого?

Это тестовая страница: http://websvit.com/temp/button.html

Заранее большое спасибо! 

<style type="text/css">

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.submit-button {
    background: transparent url('images/button-1b.png') no-repeat scroll top right;
    color: #fff;
    display: block;
    float: left;
    font: bold 13px sans-serif, arial;
    height: 28px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
    outline: none;
}

a.submit-button span {
    background: transparent url('images/button-1a.png') no-repeat;
    display: block;
    line-height: 14px;
    padding: 6px 0 8px 24px;
} 

a.submit-button:hover {
    background-position: right -28px;
    outline: none;  /* hide dotted outline in Firefox */
    color: #fff;
}
a.submit-button:hover span {
    background-position: 0px -28px;
} 

a.submit-button:active {
    background-position: right -56px;
    color: #e5e5e5;
    outline: none;
}
a.submit-button:active span {
    background-position: 0px -56px;
    padding: 7px 0 7px 24px; /* push text down 1px */
} 

</style>

А это кнопка: 

<div class="clear">
<a class="submit-button" href="#" onclick="this.blur();"><span>Hello All</span></a>
</div>

альтернативный текст http://websvit.com/temp/button-1a.png альтернативный текст http://websvit.com/temp/button-1b.png

1 Ответ

1 голос
/ 10 мая 2010

все браузеры, кроме IE8 (и, возможно, более ранних версий).

Я проверил и ваш префект в IE7. IE6 работает правильно, но у вас есть эта досадная проблема прозрачности png.

Вы можете попробовать использовать псевдокласс: focus. IE8 может уважать то, что не уважал: active.

...