1

我正在定位背景精灵并更改悬停位置（使用 jQuery），它在 Chrome、IE（8）和 Safari（我在 PC 上，Win 7）中按预期工作，但我遇到了问题火狐 (4)。没有任何反应，在错误控制台中我得到了这个：

警告：解析“背景位置”的值时出错。声明被放弃。

我最初是这样定位背景的：

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 left'更改为'top left'并且效果很好，所以问题似乎是在 Firefox 中使用 px 定位背景？这是一个错误（一个功能......呵呵）还是我只是做错了什么......？（我也尝试过使用 em 和 % 但都没有奏效。）

4

1 回答 1

3

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

left -787px
于 2011-04-11T09:18:32.067 回答