backgroundPositionX 在 Firefox 上不起作用答案

【问题标题】：backgroundPositionX not working on FirefoxbackgroundPositionX 在 Firefox 上不起作用
【发布时间】：2012-12-06 13:59:15
【问题描述】：

我玩过 youtube 的精灵动画，但有一个问题。 backgroundPositionX 不能在 Firefox 下工作（但可以在 Chrome 和 IE8 上工作）... 这是代码：https://jsfiddle.net/74RZb/

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

【问题讨论】：

标签： javascript css firefox animation background-position

【解决方案1】：

这样使用：

background-position: calc(100% - 20px) center; // working on chrome and ff
background-position-x: calc(100% - 20px); // working on ie

【讨论】：

在回答问题时，请提供解释，以便网站的其他用户更容易理解。

【解决方案2】：

这适用于 IE、FF 和 chrome：

背景位置：0 中心；

【讨论】：

【解决方案3】：

你可以这样做

先安装jquery迁移

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

在你的 html 中包含这些

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

在这种情况下，背景位置可以更改为支持的属性 backgroundPosition

可用的标志是 - webkit - safari - 歌剧 - msie (for IE) - mozilla

IE 或 Firefox 示例

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

对于铬

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

我的工作和所有的 IE

干杯

【讨论】：

【解决方案4】：

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

background-position: calc(NXpx) NYpx;

【讨论】：

【解决方案5】：

Background position-x 可以在 firefox 中工作，你只需要指定一个固定的 background-y 位置。这是我编写的用于从左向右移动功能区的函数。起初，当只有一个 position-x 规范时它不起作用，它在 IE 中有效，但在 FF 中无效。这是我的解决方案。这是我网站上的 cmets 的实际代码，在 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);
            }
        }
    }

【讨论】：

即使在 CSS 中设置了 background-position-y 也不起作用

【解决方案6】：

Firefox 不支持 backgroundPositionX，但支持background position

所以我们可以这样做：

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

这会设置背景位置，首先是 X，然后是 Y。

工作示例here

【讨论】：

谢谢，一旦stackoverflow允许我，我会点击“接受的答案”按钮:)
它是对的，但看看我的回答，从你的回答来看它工作正常。您的代码运行缓慢。
@Andy 是的，你是对的。我也投票赞成你的答案。冷静..我试过你的公式，但它的工作速度很慢。所以我把它从 60 改成了 30。祝你有美好的一天。