CSS sprite不显示在Firefox中，但在Chrome中显示 [英] CSS sprite not appearing in Firefox, but displaying in Chrome
问题描述
我在努力使一个CSS sprite出现在我的HTML页面，我不能。
然后我把代码放在plunker上来共享代码到SO，它的工作！
然后我明白它不能在Firefox上工作，但适用于Chrome。
I am struggling to make a CSS sprite appear in my HTML page, and I couldn't. Then I put the code on plunker to share the code to SO, and it worked! Then I understood that it doesn't work on Firefox, but works on 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-image 的 img 标记。我真的不知道浏览器支持是什么，但这是一个坏主意。而是使用div。您还需要将样式强制为内联块。或者，你可以使用类似字体awesome / glyphicon的 :: before 样式之前的策略，通常与跨度一起使用。
You're using img tags with background-image. I honestly don't know what browser support is for that, but it's a bad idea. Instead use divs. You'll also need to make the styles forcing it to inline block. Alternatively, you could go with something like font awesome/glyphicon's strategy of ::before styling, usually used with spans.
<!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中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
