Facebook粉丝页面上的Widget，评论区域在可见区域之外

Question

在粉丝专页上使用喜欢或发送小部件时（如果您使用iframe标签或fbml，则无需使用），用于评论的叠加层始终位于右侧。看到 例如http://twitpic.com/4q7ggi。

我无法找到一种方法让小部件尊重facebook标签的520px边界。 有关示例，请参阅http://www.facebook.com/pages/Ludwig-Test/127771653944246?sk=app_101150316644842。 任何人都知道如何解决这个问题？

TIA Rufinus

Answer 1

尝试将此添加到您的css：

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

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

这是an example。

Answer 2

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

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调整垂直位置并将背景图像移到底部。

图片如下所示： 。

2）将overflow: hidden应用于包装iframe的范围，我们将能够通过在步骤3中应用margin-top来切断部分iframe，并将其替换为我们自己的。{ / p>

.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;
    }   

在我的情况下结果如下：

Answer 3

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

以上使用jsFiddle和此CSS的示例：

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

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

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

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

Answer 4

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

Answer 5

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