1

I can't figure this out..hopefully someone else can.

I have an image button . The hover effect works fine. However, I have the IE broken image icon over the button image.

Lookie here: Funky Image Funky Image Hover

As you can see...they both work except for that annoying broken image.

Here's my CSS:

.donate-btn{
background: transparent url(/custom/img/donate-btn.png) no-repeat;
overflow:hidden;
height:45px;
width:210px;
float:left;
}
.donate-btn:hover{
background: transparent url(/custom/img/donate-btn.png) no-repeat;
height:45px;
width:210px;
background-position: 0 -45px;
}
4

1 回答 1

2

这仅仅意味着您在source属性中引用了一个不存在的图像。您应该考虑改用实际<button>标签。它只需要一些额外的样式属性来删除边框和填充：

.donate-btn{
    background: transparent url(/custom/img/donate-btn.png) 0 0 no-repeat;
    overflow:hidden;
    height:45px;
    width:210px;
    border: none;
    padding: 0;
    float:left;
}

.donate-btn:hover{
    background-position: 0 -45px;
}

我还通过删除悬停状态下的一些不必要的样式来简化您的 CSS。

<button class="donate-btn" type="submit"></button>
于 2009-12-17T00:56:46.407 回答