У меня есть кнопка отправки, которая имеет следующий CSS:
.button{
border:1px solid #015691;
background-image:url('http://boundsblazer.com/pkg/pics/
buttons/small-button.png');
color:#ffffff;
height:18px;
font-size:8pt;
font-family:sans-serif, verdana;
cursor:pointer;
line-height:14px;
margin-bottom:-5px;
border-bottom-color:#222222;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
behavior: url("http://boundsblazer.com/pkg/plugins/PIE.htc");
}
и мой JQuery ...
$(".button").mousedown(function(){
$(this).css('border-bottom-width', '0px');
$(this).css('background-image', 'url(\'http://boundsblazer.com/pkg/pics/buttons/small-button-pressed.png\')');
$(this).mouseout(function(){
$(this).css('border-bottom-width', '1px');
$(this).css('background-image', 'url(\'http://boundsblazer.com/pkg/pics/buttons/small-button.png\')');
});
$(this).mouseup(function(){
$(this).css('border-bottom-width', '1px');
$(this).css('background-image', 'url(\'http://boundsblazer.com/pkg/pics/buttons/small-button.png\')');
});
});
Странно, но в IE7 или IE9 проблем нет, только в IE8. Что происходит, так это то, что изображение для кнопок не отображается. Он работает на Safari, Chrome, Firefox, Opera, IE7 и IE9, но не на IE8. Если вы хотите увидеть его, его http://boundsblazer.com. Пожалуйста, помогите!
Кстати, «решение границы» не работает, как вы можете видеть, я объявил границу в CSS.
Проблема решена:
Тег behavior не работает в IE8, поэтому, если вы хотите PIE CSS3 для скругленных границ в IE8, это не нужно. Также добавим:
background:transparent url()
и избавление от:
background-image:url()
работал.