Javascript backgroundPositionX 不适用于 Firefox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13948617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
backgroundPositionX not working on Firefox
提问by T1000
I have play with youtube's sprite animation but there is a problem. backgroundPositionXwon't work under Firefox (but works on Chrome and IE8)...
This is the code: https://jsfiddle.net/74RZb/
我玩过 youtube 的精灵动画，但有问题。backgroundPositionX无法在 Firefox 下工作（但在 Chrome 和 IE8 上工作）......这是代码：https: //jsfiddle.net/74RZb/
Extra info: the problem is that under firefox It doesn't change the background position (won't play the animation)... there are no errors, just doesn't change the background position.
额外信息：问题是在firefox下它不会改变背景位置（不会播放动画）......没有错误，只是不会改变背景位置。
回答by Andy
Firefox doesn't support backgroundPositionX, but it does support background position
Firefox 不支持 backgroundPositionX，但它支持背景位置
So we can do something like this:
所以我们可以做这样的事情：
psy.style.backgroundPosition = x+'px 0';
This sets the background position, X first, then Y.
这将设置背景位置，首先是 X，然后是 Y。
Working example here
这里的工作示例
回答by technocrusaders.com
This works in IE, FF and chrome:
这适用于 IE、FF 和 chrome：
background-position: 0 center;
背景位置：0 中心；
回答by Leonardo Cardoso
This worked for me. NXis number of pixels in axis X and NYin axis Y.
这对我有用。NX是 X 轴和NYY轴上的像素数。
background-position: calc(NXpx) NYpx;
回答by Minh Khiêm Nguy?n
Using like this:
像这样使用：
background-position: calc(100% - 20px) center; // working on chrome and ff
background-position-x: calc(100% - 20px); // working on ie
回答by Shon
Background position-x can work in firefox you just have to specify a fixed background-y position. Here is a function I wrote to move a ribbon from left to right. At first it did not work when there was just a position-x specification, well it worked in IE but not FF. This was my solution. It is the actual code with comments from my site that works in both IE and FF:
Background position-x 可以在 firefox 中工作，您只需要指定一个固定的 background-y 位置。这是我编写的从左到右移动功能区的函数。起初，当只有一个 position-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);
}
}
}
回答by Indah Ibrahim
You can do something like this
你可以做这样的事情
First install jquery migration
首先安装jquery迁移
https://github.com/jquery/jquery-migrate/#readme
https://github.com/jquery/jquery-migrate/#readme
Include these on your html
将这些包含在您的 html 中
The $.browser property allows you to target browsers you want to apply your style into
$.browser 属性允许你定位你想要应用你的样式的浏览器
In this case for background-position can be changed to property supported backgroundPosition
在这种情况下，背景位置可以更改为属性支持的背景位置
Available flags are - webkit - safari - opera - msie (for IE) - mozilla
可用的标志是 - webkit - safari - 歌剧 - msie（用于 IE） - mozilla
Example for IE or Firefox
IE 或 Firefox 的示例
if ( $.browser.msie || $.browser.mozilla) {
$(".element").css('backgroundPosition', position + "px 0");
}
for chrome
镀铬
if ( $.browser.webkit) {
$(".element").css('backgroundPosition', position + "px 0");
}
I got mine working and for all IE
我让我的工作和所有 IE
Cheers
干杯
