css background-position 크로스 브라우저

Question

여러 상태의 버튼이 포함 된 스프라이트 이미지를 사용하고 있습니다. Chrome 및 Edge에서는 백그라운드 위치가 작동하지만 Firefox에서는 작동하지 않습니다!

바이올린 : (당신이 크롬/가장자리에서 이것을 실행하는 경우가 아니라 파이어 폭스에서 작동) https://jsfiddle.net/bkgrnnmu/1/

스프라이트 이미지의 레이아웃 : 나는 또한 그

을 발견

  buttons 
     _ _ _ _ _ 
Normal: |_|_|_|_|_| 
Hover: |_|_|_|_|_| 
Click: |_|_|_|_|_| 
Dis: |_|_|_|_|_| 

background-position-x 
background-position-y 

거의 사용되지 않는 CSS입니다. 다른 방법으로 해결할 수 있습니까?

Answer 1

Firefox는 background-position-x 또는 background-position-y를 지원하지 않습니다. 배경 위치를 시도하십시오 : 0 0; 첫 번째 조건은 x, 두 번째 조건입니다.