1

Chrome または IE で見ると問題なく動作するこのフィドルがあります。オレンジ色のボックスをクリックするだけで、ボックスがスライドして出てきます。もう一度クリックすると、正確に元の位置に戻ります。

ただし、Firefoxで見ると（スクロールバーが右下のフレームに表示されていることを確認してください）、ボックスを配置するCSS

right: -290px;

私が期待するように、スクロールバーの左端を基準にして位置を設定します...

ただし、jQuery（=-290pxに注意してください。これにより、2回目のクリック時の場所にリセットされます）

$('#slideClick').toggle(function() {
                $(this).parent().animate( { right: '0px' }, {queue:false, duration: 500});
            }, function() {
                $(this).parent().animate( { right: '-290px' }, {queue:false, duration: 500});
            });

スクロールバーの右端を基準にして位置を設定し、17px の不一致を与えます。

これは既知のバグですか、それとも私がどこかで間違っているだけですか。バグの場合の回避策は何ですか？

4

3 に答える 3

1

このように修正しました（ブラウザがFFの場合、スクロールバーが表示されているかどうかを検出します-そうであれば、17pxの右マージンを追加します-きれいではありませんが、機能します）

編集 -基本的なフィドルを追加し、ブラウザー ウィンドウが最終的にユーザーによってズーム (またはサイズ変更) された場合に要素の位置を修正する更新されたフィドルを追加しました。

    $('#slideClick').toggle(function() {
        $(this).parent().animate( { right: '0px' }, {queue:false, duration: 500});
    }, function() {
        $(this).parent().animate( { right: '-290px' }, {queue:false, duration: 500});

        // If UA is firefox and vert scrollbar present
        if ( ( navigator.userAgent.toLowerCase().indexOf('firefox') > -1 ) && ( $(document).height() > $(window).height() ) ) {
            $('#slideOut').css('margin-right', '17px');
        }
    });
于 2013-05-16T00:33:37.197 に答える