CSS Sprites 在图像上显示损坏的图像图标，但悬停仍然有效答案

【问题标题】：CSS Sprites showing broken image icon over image, but hover still worksCSS Sprites 在图像上显示损坏的图像图标，但悬停仍然有效
【发布时间】：2010-12-27 11:46:30
【问题描述】：

我想不通..希望其他人可以。

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

看这里：Funky Image Funky Image Hover

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

这是我的 CSS：

.donate-btn{ 背景：透明 url(/custom/img/donate-btn.png) 无重复；溢出：隐藏；高度：45px；宽度：210px；向左飘浮; } .donate-btn:悬停{ 背景：透明 url(/custom/img/donate-btn.png) 无重复；高度：45px；宽度：210px；背景位置：0 -45px； }

【问题讨论】：

标签： css internet-explorer image hover sprite

【解决方案1】：

这仅仅意味着您在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>

【讨论】：

@cballou：在 IE（所有版本）和 FF 中效果很好，但在 Safari（在 mac 或 pc 上）却不行。想法？
您需要确保您的按钮上有type="submit"，否则它不会充当提交按钮。
没关系 :) 它有效。表单中有一个 jquery 错误，导致 CS 无法加载和其他内容。现在可以了。有趣的是，FF 3.x 比 IE 和 safari 更宽容