按钮图像问题（CSS）

Question

这是我为自己制作的贝宝精灵的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）的代码

<input class="ppsprite" type="image" name="submit" alt="">

screenpic（Internet Explorer和firefox）

精灵在所有浏览器中都能很好地工作，但你可以在IE中看到一个糟糕的边框，左上角有一种丢失的图像图标。 在chrome和safari中，几乎相同（但在sprite上显示alt文本）

Answer 1

不要为你的精灵使用图像输入 - 显然这个应该显示一个断链图标，因为它必须包含一个图像（通过src设置 - attrtibute）但你没有设置一个。也许您可以使用input（链接）或按钮（a或type="button"）替换type="submit"。后者应该在不更改任何其他内容的情况下工作，因为type="submit"仍会提交表单，就像type="image"一样（我认为你不需要知道klicked x / y坐标这种情况）。

边框只是因为输入图像在某些浏览器中默认有边框而出现 - 只需为border:0;设置.ppsprite（但如上所述，您不应使用输入图像在这种情况下都是。）

Answer 2

在输入标记中添加src属性：

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

只需创建一个名为blank.gif的文件即可 你不需要对它做任何事情，只要确保它在正确的目录中。