5

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

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

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

  2. 然后，我使用 jQuery 的方法clone()为每个按钮提供绝对定位和计算出的偏移量。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 的垂直偏移倍数）。您可以在此处查看问题：

链接到测试网站

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

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

编辑：我想我会在这里发布类似 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 并且没有边距来解决它。

4

2 回答 2

6

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

于 2012-08-19T04:34:22.020 回答
3

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

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

于 2012-08-18T22:13:41.483 回答