CSS sprite 未出现在 Firefox 中，但显示在 Chrome

Question

我正在努力让 CSS 精灵出现在我的 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>

链接到：

注意：我正在删除测试 URL。代码在这里，因此不会降低问题的清晰度。

Answer 1

您正在使用 img 标签和 background-image。老实说，我不知道浏览器对此有何支持，但这是个坏主意。而是使用 div。您还需要制作强制其内联块的样式。或者，您可以使用字体 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>

Answer 2

您也可以使用  标签代替 <div> 标签。因为 div 是块级元素。

使用  标记作为图像精灵是最佳做法。这是 post 为什么  图标 Should I use tag for icons instead of ?

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
  .bg_icon{
        background-image: url(sprites.png);
        background-repeat: no-repeat;
        display:inline-block;
  }
.outdoor {
    background-position: -14px -110px;
    width: 20px;
    height: 20px;
}
.parking{
    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>
    <i class="bg_icon outdoor" ></i>
    <i class="bg_icon parking" ></i>

</body>

</html>

CSS sprite 未出现在 Firefox 中，但显示在 Chrome

CSS sprite not appearing in Firefox, but displaying in Chrome

css

firefox

css-sprites