CSS sprite not appearing in Firefox, but displaying in 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.

Please help me

Source code:

<!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>

Linked to : background-position is removed on page load

Note: I'm removing the Test URL. The code is present here, and hence doesn't reduce the clarity of the question.

回答1:

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>

回答2:

You can also use  tag instead of <div> tag. as div is a block level element.

Its a best practices to use  tag for image sprite. Here is the post why  for icons 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>

来源：https://stackoverflow.com/questions/30148190/css-sprite-not-appearing-in-firefox-but-displaying-in-chrome

标签

css

firefox

css-sprites