CSS Sprites在图像上显示损坏的图标图标，但悬停仍然可以工作 [英] CSS Sprites showing broken image icon over image, but hover still works

问题描述

我无法想象这个。别人可以。

我有一个图片按钮。悬停效果工作正常。但是，我在按钮图片上有IE破碎的图标。

在这里查看：时髦图片 时髦图片悬停

$ b $

下面是我的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; 
} 
 

解决方案

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

  .donate-btn {
 background：transparent url（/custom/img/donate-btn.png）0 0无重复; 
 overflow：hidden; 
 height：45px; 
 width：210px; 
 border：none; 
 padding：0; 
 float：left; 
} 
 
 .donate-btn：hover {
 background-position：0 -45px; 
} 
  

我也通过删除悬停状态下的一些不必要的样式简化了你的CSS。 / p>

 < button class =donate-btntype =submit>< / button> 
  

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;
}

解决方案

This simply means you are referencing a non-existent image in the source attribute. You should consider using the actual <button> tag instead. It just needs a few extra style attributes to remove borders and padding:

.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;
}

I also simplied your CSS by removing some unnecessary styling in the hover state.

<button class="donate-btn" type="submit"></button>

这篇关于CSS Sprites在图像上显示损坏的图标图标，但悬停仍然可以工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！