css background-position поперечный браузер

Question

Я использую спрайт-изображение, содержащее несколько кнопок с их состоянием. background-position работает в Chrome и Edge, но не в Firefox!

Скрипка: (если вы запускаете это в 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. Попробуйте background-position: 0 0; первое условие х, второе у.