jQuery offset().top 浏览器不兼容？

Question

我试图将一个元素定位在其他元素的正下方，但我遇到了一个问题，当页面向下滚动时，offset() 会为 IE 和其他浏览器返回不同的值。

IE 返回相对于可见区域顶部的位置(即向下滚动时下降)，而 Firefox 和 Chrome 始终返回相同的值，无论滚动如何(我认为这是更好的行为)。

只是澄清一下:令我困扰的是，如果没有一个元素的父元素是相对定位的，那么 offset() 和position() 将为 IE 返回不同的值，具体取决于您向下滚动的距离，但这永远不会jQuery 文档中提到。为什么会这样？有没有什么方法可以解决这个问题，不需要对 html 结构进行任何更改(例如，我想为许多字段重用一个日期选择器，只需稍微重新定位它)。

有人遇到同样的问题吗？

Answer 1

看看这个我的fiddle ，通过拖动红色div进行测试。

HTML

<div id="hook"></div>
<div id="hanger"></div>

CSS

#hook {
    width: 200px;
    height: 50px;
    background-color:red;
    position: absolute;
    cursor: move;
}
#hanger {
    width: 200px;
    height: 50px;
    background-color:purple;
    position: absolute;
}

Javascript

$('document').ready(function(){
    var top = $('#hook').offset().top + $('#hook').height()+20;
    var left = $('#hook').offset().left;

    $('#hanger').css('top', top);
    $('#hanger').css('left', left);

    $('#hook').draggable({
        start: function(){
            $('#hanger').toggle();
        },
        stop: function(){
                var top = $('#hook').offset().top + $('#hook').height()+20;
                var left = $('#hook').offset().left;

                $('#hanger').css('top', top);
                $('#hanger').css('left', left);

                $('#hanger').toggle();
        }
        });
});