Javascript jQuery.offset（）检索不到正确的位置

我在一个网站上工作，该网站通过PHP动态创建类似facebook的按钮。但是，包含按钮的

需要具有CSS属性

溢出：隐藏这是我发现的唯一一种可以制作两列格式的方法，这种格式迫使两列扩展为最长列的长度。这种方法唯一的问题是，当有人点击容器底部的任何类似facebook的按钮并将其展开时，这些按钮都会被剪掉

以下是我试图解决这个问题的方法：

使用jQuery，我循环浏览页面上所有类似facebook的按钮，并使用该方法计算它们的文档偏移量

然后，我使用jQuery的方法为每个按钮提供绝对位置和计算出的偏移量。我希望每个克隆的按钮将被放置在我将其附加到文档时克隆的按钮的相同位置

最后，我将每个像facebook一样的老按钮的css更改为
visibility:hidden以使其不可见，但仍会占用以前在页面上的空间。我将类似facebook的按钮的克隆添加到一个div中，没有
溢出：隐藏使用函数的属性

以下是我的整个流程代码：

// Replaces functional facebook recommend buttons with identical ones
// in a div where they won't get clipped when they expand.
// Hides the old buttons so space is still left for new ones
$(window).load(function(){
    $(".fb-recommend").each(function(){ // cycle through each recommend button
        var offset = $(this).offset(); // calculate offset of each button
        var newButton = $(this).clone(); // clone the button
        newButton.css({'position':'absolute', 'left':offset.left, 'top':offset.top});
        $(this).css("visibility","hidden"); // hide the old button
        newButton.appendTo("#wrapper"); // put the new button in the wrapper where it won't get clipped
    });
});

最后，我希望将每个按钮的克隆放在旧按钮所在的位置，但放在不同的
中。整个过程都是有效的，除了复制的类似facebook的按钮出现在与从中复制的按钮稍有不同的位置（正如PitaJ指出的那样，它们似乎偏离了大约39像素的垂直偏移倍数）。您可以在此处查看此问题：

如您所见，第一个按钮被放置在正确的位置（由其隐藏克隆填充的空白空间），但其他偏移量计算不正确

我非常感谢您提供的任何想法或帮助。让我知道，如果你想让我更好地解释或张贴更多的代码

编辑：我想我会在这里发布类似facebook的按钮的CSS（尽管我所做的更改只是页边空白）：

编辑2:根据UnLoco的建议，我在CSS中添加了一个min height属性，并注释掉了隐藏旧按钮的代码行，以便更容易发现问题（尽管问题略有减轻，但问题仍然存在。CSS现在看起来如下所示：

#content .fb-recommend {
    margin: 15px 0 5px 0;
    min-height: 39px;
}

编辑3:除了IE之外，所有浏览器都解决了这个问题，将CSS更改为：

.fb-recommend {
    min-height: 24px;  // I used 24 because the fb-buttons are 24px in height
}

最终编辑？这似乎适用于我端的所有浏览器，包括IE：

.fb-recommend {
    min-height: 39px;
}

我现在想，39可能来自旧fb按钮的15px边距+24px高度。我想我可以通过简单地将高度设置为39px而不留边距来绕过它。
我相信你的问题在于jQuery的一些奇怪之处

要解决此问题，只需将代码更改为：

$(window).load(function(){
    $(".fb-recommend").each(function(index){ // cycle through each recommend button
        var offset = $(this).offset(); // calculate offset of each button
        var newButton = $(this).clone(); // clone the button
        newButton.css({'position':'absolute', 'left':offset.left, 'top':offset.top + (39*index)});
        $(this).css("visibility","hidden"); // hide the old button
        newButton.appendTo("#wrapper"); // put the new button in the wrapper where it won't get clipped
    });
});

这将解释奇怪的偏移量问题。
这是因为您在fb iFrame实际加载之前检索偏移量。只需添加如下css规则

div.fb-推荐{最小高度：39px}
它们的关闭次数是39px@PitaJ你是如何计算出像素的确切数量的？知道为什么会发生这种情况吗？通过反复试验，我将我的
top
CSS属性设置为
offset.top+I*40
，其中
I
由
传入。每个
函数似乎都非常接近。我只是使用d反复尝试获得39，但我不明白为什么它会有这么多像素。现在我得到了，兄弟，（我删除了旧的注释）这是因为你在iFrame实际加载之前检索偏移量。只需添加一个css规则，像这样
div.fb-recomment{min height:39px}
谢谢。这是我以前一直在做的（除了我的偏移量是40而不是39）.我将在几天后对此悬赏，看看是否有其他人知道这可能发生的原因。如果没有其他人对此有更多的见解，那么正确的答案和悬赏是你的，因为你提供了一个有效的解决方案。我认为你走对了方向。我添加了CSS规则并注释掉了隐藏的代码行旧的按钮-离它们应该在的位置还有一点偏移，但是现在有一个小得多的按钮（你可以在那个链接中看到）。知道可能是什么原因吗？微调最小高度值，将其设置为40px。更改最小高度值不会对它们的偏移产生影响。即使我将最小高度设置为巨大的值（比如说200）它只是在文本下方增加了更多的空间，并且不会影响按钮偏移量。这是因为您编写了这样的规则
\content.fb recomment
它与新克隆的div不匹配！只需将其设置为简单的
。fb recomment
在firefox和chrome上看起来很棒，但在IE上却不一样
$(window).load(function(){
    $(".fb-recommend").each(function(index){ // cycle through each recommend button
        var offset = $(this).offset(); // calculate offset of each button
        var newButton = $(this).clone(); // clone the button
        newButton.css({'position':'absolute', 'left':offset.left, 'top':offset.top + (39*index)});
        $(this).css("visibility","hidden"); // hide the old button
        newButton.appendTo("#wrapper"); // put the new button in the wrapper where it won't get clipped
    });
});