0

这是我制作的贝宝精灵的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="">

屏幕截图（Internet Explorer 和 Firefox）

在此处输入图像描述

该精灵在所有浏览器中都能完美运行，但您可以在 IE 中看到一个糟糕的边框和左上方的一种丢失的图像图标。在 chrome 和 safari 中，几乎相同（但在 sprite 顶部显示 alt 文本）

4

2 回答 2

1

将 src 属性添加到您的输入标签：

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

只需创建一个名为 blank.gif 的文件，您无需对其进行任何操作，只需确保它位于正确的目录中即可。

于 2012-05-06T04:48:14.037 回答
1

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

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

于 2012-05-06T04:45:33.947 回答