backgroundPositionX不适用于Firefox

我有玩YouTube的精灵animation，但有一个问题。 它不会在Firefox下工作（但在Chrome和IE8上工作）…这是代码： http ： //goo.gl/4IxkI

额外的信息：问题是，在Firefox下它不改变背景的位置（不会播放animation）…没有错误，只是不改变背景的位置。

会apreciate帮助 – 谢谢

Answer 1

Firefox不支持backgroundPositionX，但它支持后台位置

所以我们可以这样做：

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

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

工作示例在这里

Answer 2

这工作在IE，FF和铬：

background-position：0 center;

Answer 3

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

 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中工作，你只需要指定一个固定的background-y位置。 这是我写的一个function，从左到右移动一个function区。 起初，它只是一个位置x规范，它不工作，以及在IE浏览器，但不FF。 这是我的解决scheme。 这是实际的代码与我的网站的评论，在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 – safari – opera – msie（对于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浏览器

干杯