Javascript CSS精灵代码可以在Chrome和IE中使用，但不能在Firefox中使用？_Javascript_Html_Css_Css Sprites

Javascript CSS精灵代码可以在Chrome和IE中使用，但不能在Firefox中使用？

javascript html css

Javascript CSS精灵代码可以在Chrome和IE中使用，但不能在Firefox中使用？,javascript,html,css,css-sprites,Javascript,Html,Css,Css Sprites,我使用CSS和使用精灵的HTML编写了简单的动画。它在chrome和IE上很成功，但在firefox上却不成功 <style type="text/css"> #sprite { width: 96px; height: 117px; background: url(../../images/sprite_animation_frames.png) 0px 0px; } </style> </head> <body o

我使用CSS和使用精灵的HTML编写了简单的动画。它在chrome和IE上很成功，但在firefox上却不成功

<style type="text/css">
  #sprite {
    width: 96px;
    height: 117px;
    background: url(../../images/sprite_animation_frames.png) 0px 0px;
  }
</style>
</head>

<body onload="main();">
  <p align="center"><h1>The Running Man</h1></p>
  <script>
  var position = [
    [0,   0],[-100,   0],[-200,   0],[-300,   0],[-400,   0],[-500,   0],
    [0,-120],[-100,-120],[-200,-120],[-300,-120],[-400,-120],[-500,-120],
    [0,-240],[-100,-240],[-200,-240],[-300,-240],[-400,-240],[-500,-240],
    [0,-360],[-100,-360],[-200,-360],[-300,-360],[-400,-360],[-500,-360],
    [0,-480],[-100,-480],[-200,-480],[-300,-480],[-400,-480],[-500,-480]
  ];
  var pos;
  function main(){
    var img = document.createElement('img')
    img.id = 'sprite';
    document.body.appendChild(img);
    setInterval(function () {
      anim(img);
    }, 50);
  }
  var i = 0;
  function anim(el) {
    if (i < 30)
      i++;
    else
      i = 0;
    var x = position[i][0];
    var y = position[i][1];
    el.style.backgroundPositionX = x + 'px ';
    el.style.backgroundPositionY = y + 'px ';
  }
  </script>


#雪碧{
宽度：96px；
高度：117px；
背景：url（../../images/sprite\u animation\u frames.png）0px 0px；
}
跑步者
变量位置=[
[0,   0],[-100,   0],[-200,   0],[-300,   0],[-400,   0],[-500,   0],
[0,-120],[-100,-120],[-200,-120],[-300,-120],[-400,-120],[-500,-120],
[0,-240],[-100,-240],[-200,-240],[-300,-240],[-400,-240],[-500,-240],
[0,-360],[-100,-360],[-200,-360],[-300,-360],[-400,-360],[-500,-360],
[0,-480],[-100,-480],[-200,-480],[-300,-480],[-400,-480],[-500,-480]
];
var-pos；
函数main（）{
var img=document.createElement（'img'）
img.id='sprite'；
文件.正文.附件（img）；
setInterval（函数（）{
动画（img）；
}, 50);
}
var i=0；
功能动画（el）{
如果（i<30）
i++；
其他的
i=0；
var x=位置[i][0]；
变量y=位置[i][1]；
el.style.backgroundPositionX=x+'px'；
el.style.backgroundPositionY=y+'px'；
}

有什么问题吗？

Firefox不支持单个

backgroundPositionX

属性，IE可能会抱怨额外的空间。尝试：

el.style.backgroundPosition = x+"px "+y+"px";

能够解决问题

只是替换了div标签而不是img，它就工作了

不知道问题。

嗨@Niet the Dark Absol我尝试了你建议的更改，但仍然没有显示任何图像。我检查了元素，观察到img背景位置不断变化，但没有显示图像。嗯，好的。元素上的背景图像设置是否正确？您好，我没有解决问题，谢谢您的帮助。我用“div”标记代替img标记，它起作用了。。我不知道原因