LINK TO TEST WEBSITE

Question

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

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

使用jQuery，我遍历页面上所有类似facebook的按钮，并使用offset()方法计算文档偏移量。
然后我clone()每个按钮，并使用jQuery的css()方法给出绝对定位和计算的偏移量。我希望每个克隆按钮都放在与我将其附加到文档时克隆的按钮的相同位置。
最后，我将每个旧的类似facebook的按钮的css更改为visibility: hidden;，以使其不可见但仍占用之前在页面上的空间。我使用appendTo()函数将类似facebook的按钮的克隆添加到没有overflow: hidden;属性的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
    });
});

在所有这些结束时，我希望每个按钮的克隆都放在旧按钮所在的位置，但位于不同的<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}

Answer 2

我相信你的问题是一些奇怪的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
    });
});

这将解决奇怪的偏移问题。

jQuery .offset（）没有检索正确的位置

LINK TO TEST WEBSITE

2 个答案: