1

バックグラウンド スプライトを配置し、(jQuery を使用して) ホバー時に位置を変更しています。Chrome、IE(8)、および Safari (私は PC、Win 7 を使用しています) で期待どおりに動作しますが、問題が発生していますファイアフォックス (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 left」を「左上」に変更してみましたが、うまくいきました。問題は、Firefox で px を使用して背景を配置しているようです。これはバグ（機能... hehe）ですか、それとも単に何か間違っているのですか...？( em と % も使用してみましたが、どれもうまくいきませんでした。)

4

1 に答える 1

3

-787pxの完全に有効な値ですbackground-position。ただし、順序が混在しています。水平が最初に来ます。それが問題かもしれません。値を変えてみてください:

left -787px
于 2011-04-11T09:18:32.067 に答える