Firefox에서 CSS 스프라이트가 제대로 작동하지 않습니다.

Question

내 웹 사이트에 소셜 미디어 용 CSS 스프라이트를 추가했지만 Safari 및 Chrome에서보기가 정확하면 Firefox에서 제대로 작동하지 않습니다.

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> 

단지 Facebook`s 아이콘을 반복적으로 보여주고있다. 무엇이 문제 일 수 있습니까?

Answer 1

Firefox는 background-position-y 및 background-position-x CSS 속성을 지원하지 않습니다. 그것은 IE 구현에서 이월 한 것이기 때문에 어느 시점에서 사양에서 벗어났습니다.

표준 배경 위치를 사용하십시오. 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; 
}