facebook喜欢粉丝页面上的小部件，评论区域不在可见区域

StackOverflow https://stackoverflow.com/questions/5808240

题

在使用the the或在粉丝页面上发送小部件时（如果您使用iframe标签或FBML为此，则无元小部件）评论的覆盖层始终位于右边。看http://twitpic.com/4q7ggi 例如。

我找不到一种方法来获取小部件来尊重Facebook选项卡的520px边界。看 http://www.facebook.com/pages/ludwig-test/127771653944246?sk=App_10115150316644842 例如。有人想解决这个问题吗？

Tia Rufinus

有帮助吗？

解决方案

尝试将其添加到您的CSS：

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

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

这是 一个例子.

其他提示

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

1）将弹出窗口移至所需位置。使用！重要的语句覆盖默认样式。 

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

图像看起来像这样：Image overlay for facebook like button popup.

2）申请 overflow: hidden 到包裹iframe的跨度，我们将能够通过应用来切断iframe的一部分 margin-top 在步骤3中，并用我们自己的东西代替它们。

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

我正在使用边界顶部来创建自己的上边界，因为在步骤3中，我们正在切割默认边框和箭头。

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

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

在我的情况下，结果看起来像这样：

enter image description here

如果您正在使用XFBML的实现 Facebook喜欢按钮, ，您可以使用CSS重新位置“飞行”菜单，相对于其原始位置附近的原始位置 发送 按钮：

enter image description here

上述示例使用 JSFIDDLE 和这个CSS：

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

由于“飞行”的内容在 iframe 您将无法对其应用任何CSS - 意味着，将三角指示器移动到“飞行”的右侧。

Web浏览器由于欺骗和其他骇客而在跨框架脚本上加强了安全性，因此用自己的CSS和JavaScript将IFRAME视为单独的HTML页面。

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

这不是一个很好的答案，但我发现的唯一选择是将小部件包裹在绝对位置的div中，以将其保存在窗户的左侧

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top