jquery - Firefox，位置固定，滚动条

Question

在这个例子中，如果我将 div 设置为红色，它会向右产生奇怪的移动。我认为问题只出现在 Firefox 上，div 是正确的，有滚动条和位置固定。

(如果我使用绝对位置，我可以解决移动问题。但是如果用户滚动，div 就会移动，并且它应该“固定”在右侧、底部)

• 火狐浏览器
• 对
• 滚动条
• 固定位置

请在这里检查: http://jsfiddle.net/LhAEh/1/

HTML:

<div id="blue"></div>
<div id="red"></div>

CSS:

#red {
    position: fixed; /* fixed genera el problema */ 
    bottom: 20px; right:25px;
    width:80px; height:50px;
    cursor:pointer; 
    background:red;
}

#blue {
    margin:0 auto;
    width:80px; height:500px;
    background:blue;
}

JQUERY:

$(function(){   
    $("#red").click(function() {
        $("#red").animate({bottom:'-80px'},1000);
    }); 
})

• 图像1:原始位置

• 图像 2:当有人单击时，它会向右移动，然后向下移动。它应该只向下移动

Answer 1

看起来已经找到了解决方法，将固定框的位置更改为绝对位置并将其放入另一个固定位置 div 中: CSS fixed position movement under scrollbar in Firefox

此外，此问题还有一个 Unresolved 错误:CSS position fixed no longer factors in scrollbar after hover

更新:找到了更好的解决方法，使用 min-width 而不是固定框的宽度:https://stackoverflow.com/a/15705522/980692