javascript - jQuery .offset() 没有检索到正确的位置

Question

我正在开发一个通过 PHP 动态创建类似 facebook 按钮的网站。然而，<div>按钮包含在需要具有 CSS 属性 overflow: hidden;这是我发现可以制作双列格式的唯一方法，该格式强制两列扩展为最长一列的长度。这种方法的唯一问题是，当有人点击它们并展开时，放置在容器底部附近的任何类似 facebook 的按钮都会被剪掉。

以下是我尝试解决此问题的方法:

1. 我使用 jQuery 遍历页面上所有类似 facebook 的按钮，并使用 offset() 计算它们的文档偏移量方法。

2. 然后我 clone() 每个按钮以及使用 jQuery 的 css() 给它绝对定位和计算的偏移量方法。当我将每个克隆按钮附加到文档时，我希望将其放置在与克隆按钮相同的位置。

3. 最后，我将每个类似 facebook 的旧按钮的 css 更改为 visibility: hidden;为了使其不可见但仍占用它之前在页面上的空间。我将类似 facebook 按钮的克隆添加到没有 overflow: hidden; 的 div使用 appendTo() 的属性功能。

这是我完成这个过程的全部代码:

// 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
    });
});

在这一切结束时，我希望将每个按钮的克隆放置在旧按钮所在的位置，但在不同的 <div> 中。 .整个过程有效，除了克隆的类似 facebook 的按钮出现在与它们被克隆的按钮略有不同的位置(正如 PitaJ 指出的那样，它们似乎偏离了大约 39px 的垂直偏移倍数)。您可以在此处查看问题:

LINK TO TEST WEBSITE

如您所见，第一个按钮放置在正确的位置(由其隐藏的克隆填充的空白区域)但其他偏移量计算不正确。

如果有任何想法或帮助，我将不胜感激。如果您希望我更好地解释或发布更多代码，请告诉我!

编辑:我想我会在这里发布类似 facebook 的按钮的 CSS(即使我要更改的只是边距):

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

编辑 2: 根据 UnLoco 的建议，我向 fb-reccommend 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 并且没有边距来解决这个问题。

Answer 1

这是因为您在 fb iframe 实际加载之前检索偏移量。只需添加这样的 css 规则
div.fb-recommend{min-height:39px}