按钮图像问题（css）

这是我制作的贝宝精灵的css

下图显示了我们在Internet Explorer和Firefox中获得的内容

显示精灵的代码为：

.ppsprite {
background: url('/images/paypal_sprite.png')no-repeat scroll 0px 0px transparent;
width:200px;
height:100px;
position:absolute;
left:54px;
}
 .ppsprite:hover {
background: url('/images/paypal_sprite.png')no-repeat scroll 0px -100px transparent;
}

显示精灵的代码（html）

屏幕图片（internet explorer和firefox）

精灵在所有浏览器中都能完美工作，但你可以在IE中看到一个糟糕的边框和左上角缺少的图像图标。

---

在chrome和safari中，几乎相同（但在sprite顶部显示alt文本）

不要为sprite使用图像输入-显然这应该显示一个断开的链接图标，因为它必须包含一个图像（通过

src

-attrtibute设置），但您没有设置。也许您可以用

a

（链接）或按钮（

type=“button”

或

type=“submit”

）来替换

输入。后者应该可以在不更改任何其他内容的情况下工作，因为
type=“submit”
仍然会提交表单，就像
type=“image”
一样（在这种情况下，我认为您不需要知道klicked的x/y坐标）

边框之所以出现，是因为在某些浏览器中，输入图像默认有边框-只需设置
border:0
用于
.ppsprite
（但是，如上所述，在这种情况下，您根本不应该使用输入图像）。
将src属性添加到您的输入标记：

<input class="ppsprite" type="image" name="submit" alt="" src="images/blank.gif">



只需创建一个名为blank.gif的文件
您不需要对它做任何操作，只需确保它位于正确的目录中。
完美我忘记了这一点：添加了1px gif现在您已经添加了一个图像（在服务器上又点击了1次），同时仍然使用CSS精灵，该精灵不会一直显示（在Windows和其他许多情况下），并且这些情况下仍然没有
@alt
（或者您在本例中删除了它？）。为什么不使用不会影响性能的HTML图像（它用您1999年的
blank.gif
换取
paypal\u buynow.png
）？
<input class="ppsprite" type="image" name="submit" alt="" src="images/blank.gif">