我正在努力让 CSS Sprite 出现在我的 HTML 页面中，但我做不到。 然后我把代码放在 plunker 上以将代码共享给 SO，它成功了! 然后我明白它在 Firefox 上不起作用，但在 Chrome 上可以。
请帮帮我
源代码:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.outdoor {
background-image: url(sprites.png);
background-repeat: no-repeat;
background-position: -14px -110px;
width: 20px;
height: 20px;
}
.parking{
background-image: url(sprites.png);
background-repeat: no-repeat;
background-position: -15px -60px ;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<h1>Hello Sprites.. Why are you appearing in Chrome, but not in Firefox? Please appear</h1>
<img class="outdoor" /><img class="parking" />
</body>
</html>
链接到:background-position is removed on page load
注意:我正在删除测试 URL。代码在这里，因此不会降低问题的清晰度。
最佳答案
您正在将 img 标签与 background-image 一起使用。老实说，我不知道浏览器对此有何支持，但这是个坏主意。而是使用 div。您还需要制作强制其内联 block 的样式。或者，您可以使用 font awesome/glyphicon 的 ::before 样式策略，通常与 span 一起使用。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.outdoor {
background-image: url(sprites.png);
background-repeat: no-repeat;
background-position: -14px -110px;
width: 20px;
height: 20px;
display:inline-block;
}
.parking{
background-image: url(sprites.png);
background-repeat: no-repeat;
background-position: -15px -60px ;
width: 20px;
height: 20px;
display:inline-block;
}
</style>
</head>
<body>
<h1>Hello Sprites.. Why are you appearing in Chrome, but not in Firefox? Please appear</h1>
<div class="outdoor" ></div>
<div class="parking" ></div>
</body>
</html>
关于CSS Sprite 未出现在 Firefox 中，但显示在 Chrome 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30148190/