Question

我玩过youtube的精灵动画，但是有一个问题。 backgroundPositionX无法在Firefox下运行（但适用于Chrome和IE8）... 这是代码：https://jsfiddle.net/74RZb/

额外信息：问题是在firefox下它不会改变背景位置（不会播放动画）...没有错误，只是不改变背景位置。

Answer 1

Firefox不支持backgroundPositionX，但支持background position

所以我们可以这样做：

psy.style.backgroundPosition = x+'px 0';

这将设置背景位置，首先是X，然后是Y.

工作示例here

Answer 2

这适用于IE，FF和chrome：

background-position：0 center;

Answer 3

这对我有用。 NX是X轴上的像素数，Y轴中是NY。

background-position: calc(NXpx) NYpx;

Answer 4

背景位置-x可以在firefox中工作，你只需要指定一个固定的background-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 5

你可以做这样的事情

首先安装jquery迁移

https://github.com/jquery/jquery-migrate/#readme

将这些内容包含在您的HTML

中

$ .browser属性允许您将要应用样式的浏览器定位到

在这种情况下，background-position可以更改为属性支持的backgroundPosition

可用的标志是 - webkit - safari - opera - msie（适用于IE） - mozilla

IE或Firefox的示例

if ( $.browser.msie || $.browser.mozilla) {
        $(".element").css('backgroundPosition', position + "px 0");                
}

for chrome

if ( $.browser.webkit) {
        $(".element").css('backgroundPosition', position + "px 0");                
}

我得到了我的工作和所有的IE

干杯

backgroundPositionX无法在Firefox上运行

5 个答案: