css background-position cross browser

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。尝试背景位置：0 0;第一个条件是x，第二个是y。