backgroundPositionX 在 Firefox 上不起作用
Posted
技术标签:
【中文标题】backgroundPositionX 在 Firefox 上不起作用【英文标题】:backgroundPositionX not working on Firefox 【发布时间】:2012-12-06 13:59:15 【问题描述】:我玩过 youtube 的精灵动画,但有一个问题。 backgroundPositionX
不能在 Firefox 下工作(但可以在 Chrome 和 IE8 上工作)...
这是代码:https://jsfiddle.net/74RZb/
额外信息:问题是在firefox下它不会改变背景位置(不会播放动画)......没有错误,只是没有改变背景位置。
【问题讨论】:
【参考方案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
【讨论】:
谢谢,一旦***允许我,我会点击“接受的答案”按钮:) 它是对的,但看看我的回答,从你的回答来看它工作正常。您的代码运行缓慢。 @Andy 是的,你是对的。我也投票赞成你的答案。冷静..我试过你的公式,但它的工作速度很慢。所以我把它从 60 改成了 30。祝你有美好的一天。以上是关于backgroundPositionX 在 Firefox 上不起作用的主要内容,如果未能解决你的问题,请参考以下文章