jquery - css 和 jQuery 之间关于滚动条和右侧的行为不一致 :0px in Firefox

Question

我有this fiddle如果你在 Chrome 或 IE 中查看它，效果很好。您只需单击橙色框，该框就会滑出，再次单击，它会返回到原来的位置。

但是，如果您在 Firefox 中查看它(确保滚动条显示在右下框架中)，则定位该框的 CSS

right: -290px;

按照我的预期设置相对于滚动条左边缘的位置...

但是 jQuery(注意 =-290px 应该将其重置到第二次单击时的位置)

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

设置相对于滚动条右边缘的位置，产生 17px 的不一致。

这是一个已知的错误，还是我只是在某个地方弄错了。如果是错误，解决方法是什么？

Answer 1

这也会起作用。我也遇到过类似的问题，Firefox 处理滚动条的方式不同。此解决方案不适用于 JQuery 1.9 及更高版本。您现在应该使用特征检测http://api.jquery.com/jQuery.support/但我还没有深入探讨这一点。希望这有帮助:)

    jQuery(function($) {
        $('#slideClick').toggle(function() {
            $(this).parent().animate( { right: '0px' }, {queue:false, duration: 500});
        }, function() {
            if ($.browser.mozilla && ($(document).height() > $(window).height()))
            {
                $(this).parent().animate({right: '-275px'},500);
            }
            else $(this).parent().animate( { right: '-290px' }, {queue:false, duration: 500});
        });
    });