Question

我有一个提交按钮，其中包含以下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中不起作用，因此如果你想在IE8中使用PIE CSS3作为圆形边框，那就不行了。另外，添加：

background:transparent url()

并摆脱：

background-image:url()

的工作。

Answer 1

简单，改变：

background-image:url('http://boundsblazer.com/pkg/pics/buttons/small-button.png');

为：

background:transparent url('http://boundsblazer.com/pkg/pics/buttons/small-button.png');

您还需要更改jquery。

Load this in IE8

的Al

IE8 - 按钮背景图像不显示？

1 个答案: