Firefox中的正确位置和滚动条

Question

如果我为div位置设置动画，则会产生奇怪的动作。它只发生在Firefox中，如果我有一个div右侧，如果有一个滚动条。为什么会这样，我该如何解决？

• 只有Firefox
• 正确的位置
• 滚动条

此处简化示例以检查：http://jsfiddle.net/LhAEh/1/

HTML：

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

CSS：

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

#blue {/*this div is just to create a scroll*/
    margin:0 auto;
    width:80px; height:500px;
    background:blue;
}

JQUERY：

$(function(){

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

})

Answer 1

尝试position: absolute;。

补充说明：我假设 jQuery的animate()在开始动画之前将位置更改为absolute，然后导致Firefox稍微移动对象，而不是将其留在它是。