css - CSS Sprites在图像上显示了残破的图像图标，但仍然可以悬停

我无法弄清楚..希望其他人可以。

我有一个图像按钮。悬停效果很好。但是，我在按钮图像上有IE损坏的图像图标。

此处的Lookie：Funky Image Funky Image Hover

如您所见...除了烦人的破碎图像，它们都可以工作。

这是我的CSS：

.donate-btn {
背景：透明url（/custom/img/donate-btn.png）不重复；
溢出：隐藏
高度：45像素；
宽度：210像素；
向左飘浮;
}
.donate-btn：hover {
背景：透明url（/custom/img/donate-btn.png）不重复；
高度：45像素；
宽度：210像素；
背景位置：0 -45px；
}

最佳答案

这仅表示您在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>