Facebook iframe 应用：发送/点赞按钮的z-index问题

Question

我们的facebook点赞/发送按钮出现了问题，如果您打开以下链接：http://apps.facebook.com/bymii-test/products.php?pageid=216605071714962&prd_id=35&prd_name=Coalesce：- 点击Facebook发送按钮时，弹出框被Facebook侧边栏遮挡。有没有办法：更改z-index或使窗口在左侧弹出？

- Hendrik

Answer 1

我终于找到答案了！在寻找了一个半小时之后，只需将这段代码输入到你的CSS文件中：

.fb_edge_widget_with_comment span.fb_edge_comment_widget {
top: 15px !important;
left: -250px !important;}

希望这就是你在寻找的内容，因为它正是我在寻找的！

- Shane

---

平台集成，包括社交插件：d. 您不得遮挡或覆盖我们的社交插件元素，例如“赞”按钮或“赞”框插件。 - ShawnDaGeek

从技术上讲，他并没有遮掩它 - 实际上他正在做相反的事情 ;) - BritishDeveloper

Answer 2

请确保父级/容器元素具有CSS值"overflow:visible"。当"overflow:hidden"时会发生此情况。希望这能帮到你。

- Ashish

Answer 3

我修改了Shane的优秀解决方案，专注于z-index：

css：

.fb_edge_widget_with_comment span.fb_edge_comment_widget
{
    z-index:8 !important;
}

上述CSS代码显示了Facebook小部件位于所有其他内容之上，而无需重新定位或“溢出”任何内容。

- DrDatard

Answer 4

我发现这个可以工作：

/* the below allows the fb:like iframe to show entirely instead of getting cropped off */

.fb-like iframe {
    max-width: inherit;
}

/* the same issue with the "send" button */

.fb-send iframe {
    max-width: inherit;
}

正如您所见，它要求这些元素“继承”其父元素的宽度属性。

希望能对您有所帮助。

- Mitch Powell

Answer 5

它弹出并在所有内容的上方显示的方法是使 XFBML 中的 like 按钮工作。 iframe 实现受到限制，如果你改变其高度和宽度以适应按钮，窗口将会隐藏。

- Francis Pelland

---

怎么做？代码：<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=224101210975942&xfbml=1"></script><fb:like href="" send="true" width="450" show_faces="true" font=""></fb:like>？ - Hendrik

Fancis，我使用xFBML按钮，但它们不会重新定位。我想问一下，也许我错过了某个参数吗？ - ShawnDaGeek

Answer 6

这是所有开发人员都面临的常见问题。弹出窗口无法检测其在页面或iframe中的相对位置。
为了获得所需的结果，我总是将我的喜欢、发送按钮安装在页面的左侧。

- ShawnDaGeek