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

Posted 2023-05-08

【中文标题】CSS Sprites 在图像上显示损坏的图像图标，但悬停仍然有效

【英文标题】：CSS Sprites showing broken image icon over image, but hover still works

【发布时间】：2010-12-27 11:46:30

【问题描述】：

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

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

看这里：Funky ImageFunky 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；

【参考方案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 更宽容