CSS Sprites在Firefox上無法正常工作

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`s圖標。可能是什麼問題呢？

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; 
}