Код CSS Sprite работает в Chrome и IE, но не в Firefox?

Question

Код CSS Sprite работает в Chrome и IE, но не в Firefox?

0

Я написал простую анимацию, используя 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>

В чем может быть проблема?

Sachin Doiphode 16 апр. 2014, в 14:39

Источник

Теги:

javascript

html

css3

css-sprites

2 ответа

Ещё вопросы

Sachin Doiphode · Answer 1 · 2014-04-16T23-45-00.000Z

Способна решить проблему.

Просто заменил тег div вместо img, и он сработал.

Не знаю вопроса.

Niet the Dark Absol · Answer 2 · 2014-04-16T09-50-00.000Z

Firefox не поддерживает отдельные свойства backgroundPositionX/Y, и IE может жаловаться на дополнительное пространство. Пытаться:

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

Привет @Niet the Dark Absol. Я попытался изменить, что вы предложили, но все равно, изображение не отображается. Я проверил элемент и заметил, что img background-position постоянно меняется, но изображение не отображается.
Хм, хорошо. Правильно ли задано background-image для элемента?
Привет Нейт Я решил проблему, Спасибо за вашу помощь. Вместо тега img я использовал тег div, он работал .. не знаю причину