0

サイトのナビゲーションに「マジック ライン」があります (ホバーしたメニュー要素の下にスライドし、既にその URL にいる場合はそこにとどまります)。

$(function() {
    var $el, leftPos, newWidth, $mainNav = $("#menu");

    $mainNav.append("<li id='magic-line'></li>"); // line with position
                                                    // absolute
    var $magicLine = $("#magic-line");
    // initialization
    if ($('.selected')[0].id == 'logo') { // we're on the main page
        $magicLine.width(1) // just hide
        .css({
            "left" : 100
        }).data("origLeft", 100).data("origWidth", 1);
    } else { // we're on the not-main page
        off = parseInt($('#menu > .selected').css('padding-left').slice(0, -2));
        leftPos = $("#menu > .selected").position().left + off;
        $magicLine.width($(".selected").width()) // stay under the menu
                                                    // element
        .css("left", leftPos).data("origLeft", $magicLine.position().left)
                .data("origWidth", $magicLine.width())
    }

    $("#menu > .nav-item").hover(function() { // go under the menu element
        $el = $(this);
        newWidth = $el.width();
        off = parseInt($el.css('padding-left').slice(0, -2));
        leftPos = $el.position().left + off;
        $magicLine.stop().animate({
            left : leftPos,
            width : newWidth
        }, 200);
    }, function() {
        $magicLine.stop().animate({
            left : $magicLine.data("origLeft"),
            width : $magicLine.data("origWidth")
        }, 200);
    });
});

そして、私はいくつかの奇妙な行動を検出しました。ブラウザーごとに少し異なりますが、傾向は同じです。メニュー要素をクリックすると、適切な位置 (左 260px としましょう) に移動し、何度もクリックできますが、まだそこにあります。しかし、F5 を押す (または単に URL を入力する) と、わずかに異なる位置 (左 256px) に表示されます。そのため、同じ要素をクリックすると、再び適切な位置に配置されます。もし私が止まらなければ、それは劇的に変化し、F5 が適切な位置に現れた後です。

では、この行動の理由は何ですか？どういうわけか状態を保存していますか？F5 とクリックだけの違いは何ですか? 現時点で私が目にする唯一の原因は、私のdjango開発Webサーバーであり、これは完全に同期的で、遅く、キャッシュされていませんが、実稼働サーバーでは確認できません。

4

1 に答える 1

1

そのため、問題はメニューで使用されるカスタム フォント (@font-face) と関連する幅にありました。フォントがセーフ リスト (Arial、Verdana) のいずれかに変更された場合、レンダリングされて期待どおりに動作しますが、カスタムの書体を使用すると折りたたまれます。ちなみに、ブラウザのJSコンソールに「リソースはフォントとして解釈されましたが、MIMEタイプはapplication/x-font-otfで転送されました」という警告が表示されましたが、それが問題に関連しているかどうかはわかりません。

そして、私の解決策は、各要素の幅を宣言するだけなので、ブラウザーは最初から正しくレンダリングできます。

于 2012-06-01T19:50:05.957 に答える