20

在粉丝页面上使用点赞或发送小部件时（无论您是否使用 iframe 标签或 fbml），用于评论的叠加层始终位于右侧。例如，参见 http://twitpic.com/4q7ggi 。

我找不到让小部件尊重 facebook 选项卡的 520px 边界的方法。有关示例，请参见http://www.facebook.com/pages/Ludwig-Test/127771653944246?sk=app_101150316644842 。有人知道如何解决这个问题吗？

TIA Rufinus

4

5 回答 5

18

尝试将此添加到您的CSS：

.fb_edge_comment_widget {
    margin-left: -350px;
}

这会将评论框向左移动，但指向按钮的小箭头也会移动（您可以尝试用另一个元素覆盖它）。它仅在您使用 XFBML 而不是 iframe 时才有效。

这是一个例子。

于 2011-05-27T11:56:47.627 回答
3

我不得不把小箭头移到底部，我就是这样做的。

1）将弹出窗口移动到所需位置。使用 !important 语句覆盖默认样式。

.fb_edge_comment_widget {
    top: -224px !important; left: -246px !important; height: 191px;
    background: url(../img/arrow-down.gif) 0 100% no-repeat
}

此样式还包含一个新的箭头图像，它替换了弹出窗口的底线。它包含我自己的新底部箭头，默认为蓝色 (#283E6C)，内部为灰色 (#F2F2F2)。我们可以使用height调整垂直位置并将背景图像移动到底部。

图像将如下所示： facebook 的图像叠加，如按钮弹出。

2）应用overflow: hidden到包裹iframe的span，我们将能够通过在步骤3中应用来切断部分iframe margin-top，并用我们自己的替换它们。

.fb_edge_comment_widget > span {
    height: 184px !important; overflow: hidden; border-top: 1px solid #000;
}

我正在使用border-top 来创建我自己的上边框，因为在第3 步中我们正在剪切默认边框和箭头。

3) 将 iframe 向上移动一点以切断其上边框和箭头。

    .fb_edge_comment_widget > span > iframe {
        margin-top: -7px;
    }

在我的情况下，结果如下所示：

在此处输入图像描述

于 2012-07-31T12:14:12.637 回答
2

如果您使用Facebook Like 按钮的 XFBML 实现，您可以使用 CSS 将“弹出”菜单相对于其在发送按钮附近的原始位置重新定位：

在此处输入图像描述

上面使用jsFiddle和这个 CSS 的例子：

.fb_edge_comment_widget {
    margin-left: -343px;
}

由于“弹出”的内容在内部，iframe您将无法对其应用任何 CSS ——这意味着，将三角形指示器移动到“弹出”的右侧是不可能的。

由于欺骗和其他黑客攻击，Web 浏览器加强了跨框架脚本的安全性，因此 iframe 被视为具有自己的 CSS 和 JavaScript 的单独 HTML 页面。

对于任何高级 CSS 样式，您都必须使用 DOM 脚本注入 Facebook Widget 的 iframe ......即使这样，它也可能无法跨浏览器工作。

于 2011-05-27T15:34:17.963 回答
0

不是一个很好的答案，但我发现的唯一选择是将小部件包装在绝对定位的 Div 中，以将其保持在窗口的左侧

于 2011-05-26T02:17:26.383 回答
0

要修复它，我强烈建议将 Facebook 小部件放在页面的左侧。任何其他解决方案都可以在一段时间内有效，但将来会失败。原因是 Facebook 经常更新它的小部件。

于 2016-06-11T13:51:22.287 回答