CSS Sprite代码可在Chrome和IE中使用，但不能在Firefox中使用？

Question

I wrote simple animation using CSS and HTML using sprites. 我使用精灵使用CSS和HTML编写了简单的动画。 It works successful in chrome and IE but not firefox. 它在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>

what could be the problem ? 可能是什么问题呢？

Answer 1

Firefox does not support individual backgroundPositionX / Y properties, and IE may be complaining about the extra space. Firefox不支持单独的backgroundPositionX / Y属性，IE可能会抱怨多余的空间。 Try: 尝试：

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

Answer 2

Able to solve the problem. 能够解决问题。

Just replaced div tag instead of img and it worked. 只是替换了div标签而不是img就可以了。

Don't know the issue. 不知道这个问题。

CSS Sprite代码可在Chrome和IE中使用，但不能在Firefox中使用？

问题描述

2 个解决方案

解决方案1
0 2014-04-16 11:58:24

解决方案2
0 2014-04-17 01:59:12

CSS Sprite代码可在Chrome和IE中使用，但不能在Firefox中使用？

问题描述

2 个解决方案

解决方案1 0 2014-04-16 11:58:24

解决方案2 0 2014-04-17 01:59:12

解决方案1
0 2014-04-16 11:58:24

解决方案2
0 2014-04-17 01:59:12