css 和 jQuery 之间关于滚动条和右的行为不一致：Firefox 中的 0px答案

【问题标题】：Inconsistent behaviour between css and jQuery regarding scrollbar and right:0px in Firefoxcss 和 jQuery 之间关于滚动条和右的行为不一致：Firefox 中的 0px
【发布时间】：2013-05-10 17:18:37
【问题描述】：

我有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 的不一致。

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

【问题讨论】：

标签： jquery css firefox

【解决方案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});
        });
    });

【讨论】：

【解决方案2】：

最终像这样修复它（检测浏览器是否 FF 以及滚动条是否可见 - 如果是，则添加 17px 右边距 - 不漂亮但它有效）

编辑 - 添加了 basic fiddle 和 updated fiddle 在浏览器窗口最终被用户缩放（或调整大小）的情况下修复元素的位置。

    $('#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');
        }
    });

【讨论】：

@Stanto 谢谢你想自己回答这个问题吗？
谢谢，不，我只是进行了编辑，以便人们可以看到您的小提琴......谢谢。明天会接受这个答案。

【解决方案3】：

可能与 this question 以及 firefox 处理滚动条宽度的方式与 webkit 不同

【讨论】：

谢谢...我看了...也许我错了，但我认为它们是不同的问题，可能相关或其他。这似乎与jQuery有关。