Question

我正在定位一个背景精灵并在悬停时改变位置（使用jQuery），它在Chrome，IE（8）和Safari（我在电脑，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定位背景？这是一个错误（一个功能......呵呵）还是我只是做错了什么......？（我也尝试使用em和％，但没有一个工作。）

Answer 1

-787px是background-position的完全有效值。但是，您正在混合顺序：水平首先。这可能是问题所在。尝试转换值：

left -787px

Firefox 4中使用px的背景位置问题

1 个答案: