css 背景位置跨浏览器

Question

我正在使用一个包含几个按钮及其状态的精灵图像。 background-position 在 Chrome 和 Edge 中有效，但在 Firefox 中无效！

Fiddle：（如果你在 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。