Firefox 4에서 px로 배경 위치에 문제가 있습니다

Question

배경 스프라이트를 배치하고 호버 (jQuery 사용)에서 위치를 변경하려고합니다. Chrome, IE (8) 및 Safari에서 예상대로 작동합니다. PC, Win 7)하지만 Firefox (4)에 문제가 있습니다. 아무 것도 일어나지 않고 오류 콘솔에 다음과 같이 표시됩니다.

경고 : 'background-position'에 대한 구문 분석 오류가 발생했습니다. 선언이 내려졌습니다.

나는 처음에이 같은 배경 위치 :

background-position: bottom left; 

및 변경 호버의 위치를 ​​다음과 같이 :

$(document).ready(function() { 

var bgPos = 'bottom left'; 

     $("#nav-01").hover(function() { $('.nav-wrap').css('background-position', '-787px left'); }, function() { $('.nav-wrap').css('background-position', bgPos); }); 
     $("#nav-02").hover(function() { $('.nav-wrap').css('background-position', '-656px left'); }, function() { $('.nav-wrap').css('background-position', bgPos); }); 
     $("#nav-03").hover(function() { $('.nav-wrap').css('background-position', '-525px left'); }, function() { $('.nav-wrap').css('background-position', bgPos); }); 
     $("#nav-04").hover(function() { $('.nav-wrap').css('background-position', '-394px left'); }, function() { $('.nav-wrap').css('background-position', bgPos); }); 
     $("#nav-05").hover(function() { $('.nav-wrap').css('background-position', '-263px left'); }, function() { $('.nav-wrap').css('background-position', bgPos); }); 
     $("#nav-06").hover(function() { $('.nav-wrap').css('background-position', '-132px left'); }, function() { $('.nav-wrap').css('background-position', bgPos); }); 
     $("#nav-07").hover(function() { $('.nav-wrap').css('background-position', '-1px left'); }, function() { $('.nav-wrap').css('background-position', bgPos); }); 

    }); 

내가에를 '왼쪽 -787px'을 변경 시도 디버깅하려면 '왼쪽 상단' 그리고 그게 효과가있어, 문제는 Firefox에서 px를 사용하여 배경을 배치하는 것처럼 보입니까? 이 버그 (기능 ... hehe) 또는 단순히 내가 뭔가 잘못하고 있어요 ...? (나는 em과 %를 사용하여 시도했지만 아무 것도 작동하지 않았습니다.)

Answer 1

은 background-position에 대해 완전히 유효한 값입니다. 그러나 순서를 혼합합니다. 수평이 먼저옵니다. 그것은 문제 일 수 있습니다. 값을 주위로 돌리십시오.

left -787px