我曾与YouTube的精灵动画播放，但有一个问题。 backgroundPositionX不会火狐下工作（但适用于Chrome和IE8）...这是代码： https://jsfiddle.net/74RZb/
额外的信息：问题是，Firefox的下它不会改变背景位置（将不播放动画）...有没有错误，只是没有改变的背景位置。
Answer 1:
Firefox不支持backgroundPositionX，但它不支持后台位置
因此，我们可以做这样的事情：
psy.style.backgroundPosition = x+'px 0';
此设置背景位置，X，然后再Y.
工作示例这里
Answer 2:
这在IE，FF和铬：
背景位置：0中心;
Answer 3:
这为我工作。 NX是在轴线X和像素数NY在轴线Y.
background-position: calc(NXpx) NYpx;
Answer 4:
使用这样的：
background-position: calc(100% - 20px) center; // working on chrome and ff
background-position-x: calc(100% - 20px); // working on ie
Answer 5:
背景位置x可以工作在Firefox，你只需要指定一个固定的背景y位置。 这是我写的，从左至右移动色带的功能。 起初，当出现只是一个位置-X规范它没有工作，以及它工作在IE，但不是FF。 这是我的解决方案。 这是从我的网站，在IE和FF作品评论的实际代码：
//starts ribbon motion at bottom of animation div
function startMotion() {
var ribbonMove = setInterval(function () { ribbonMotion() }, 50);
var x = 0;
var cycles = 0;
function ribbonMotion() {
//background position moves on the x plane and is fixed at 0 on the y plane (single plane specification does not work in FF)
document.getElementById("ribbon").style.backgroundPosition = x + "px" + " " + 0 + "px";
x++;
if (x == 800 || x==1600 || x==2400 ||x==3200) {
cycles++;
//sets number of cycles before motion stops (max 4 cycles)
}
if (cycles == 3) {
clearInterval(ribbonMove);
}
}
}
Answer 6:
你可以做这样的事情
首先安装jQuery的迁移
https://github.com/jquery/jquery-migrate/#readme
包括那些在HTML
在$ .browser属性允许你的目标，你要应用你的风格了浏览器
在这种情况下，对于背景位置是可以改变的财产支持backgroundPosition
可用的标志是 - 的webkit - 狩猎 - 歌剧 - （对IE）MSIE - Mozilla浏览器
例如，对于IE或Firefox
if ( $.browser.msie || $.browser.mozilla) {
$(".element").css('backgroundPosition', position + "px 0");
}
镀铬
if ( $.browser.webkit) {
$(".element").css('backgroundPosition', position + "px 0");
}
我有我的工作，并为所有IE
干杯
文章来源: backgroundPositionX not working on Firefox
