Question

我在我的网站上添加了社交媒体图标的CSS Sprites，但它在Firefox上运行不正常，因为视图在Safari和Chrome上是准确的。

CSS：

#social-icons {
   margin: 4px auto 0;
   padding: 0 0 15px;
   border-bottom: 1px dotted #222;
   text-align: right;
   font-size: .9em;
   float: right;
   width: 80%;
}

#social-icons .facebook {
   width: 30px;
   height: 30px;
   background: url(../img/social_media_icons.png);
   float: right;
   background-position-x: 289px;
   background-position-y: 0px;
}

#social-icons .twitter {
   width: 30px;
   height: 30px;
   background: url(../img/social_media_icons.png);
   float: right;
   background-position-x: 193px;
   background-position-y: -32px;
   margin-left: 10px;
}

#social-icons .youtube {
   width: 30px;
   height: 30px;
   background: url(../img/social_media_icons.png);
   float: right;
   background-position-x: 386px;
   background-position-y: -161px;
   margin-left: 10px;
}

HTML

<div id="social-icons">
   <div class="youtube"></div>
   <div class="twitter"></div>
   <div class="facebook"></div>
</div>

在Firefox上，它只是反复显示Facebook的图标。可能是什么问题？

Answer 1

Firefox不支持background-position-y和background-position-x CSS属性。它在某些时候被从规范中拉出来，因为它是IE实现的延续。

使用标准background-position：x y;相反，这将有效：

#social-icons .facebook {
   width: 30px;
   height: 30px;
   background: url(../img/social_media_icons.png);
   float: right;
   background-position: 289px 0px;
}
#social-icons .twitter {
   width: 30px;
   height: 30px;
   background: url(../img/social_media_icons.png);
   float: right;
   background-position: 193px -32px;
   margin-left: 10px;
}
#social-icons .youtube {
   width: 30px;
   height: 30px;
   background: url(../img/social_media_icons.png);
   float: right;
   background-position: 386px -161px;
   margin-left: 10px;
}

Answer 2

#social-icons .facebook {
   width: 30px;
   height: 30px;
   background: url(../img/social_media_icons.png);
   float: right;
   background-position: 289px 0px;
}

#social-icons .twitter {
   width: 30px;
   height: 30px;
   background: url(../img/social_media_icons.png);
   float: right;
   background-position: 193px -32px;
   margin-left: 10px;
}

#social-icons .youtube {
   width: 30px;
   height: 30px;
   background: url(../img/social_media_icons.png);
   float: right;
   background-position: 386px -161px;
   margin-left: 10px;
}

CSS Sprites在Firefox上无法正常工作

2 个答案: