facebook iframe 应用程序：发送/点赞按钮 z-index 问题

Question

如果您打开：http://apps.facebook.com/bymii-test/products.php?pageid=216605071714962&prd_id=35&prd_name=Coalesce： - 点击facebook发送，方框在后面脸书侧边栏。有什么方法可以：更改 z-index - 或使窗口在左侧弹出？

Answer 1

我终于找到答案了！ 1 1/2 小时后搜索..只需将此代码输入到您的 CSS 文件中：

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

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

Answer 2

确保父/容器元素具有 css 值 “overflow:visible”。当“overflow:hidden”时会发生这种情况。希望这有帮助。

Answer 3

让它弹出并覆盖所有内容的方法是使“赞”按钮在 XFBML 中工作。 iframe 的实现是有限的，如果您更改它的高度和宽度以适合按钮，窗口将显示为隐藏。

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

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

希望有帮助。

Answer 5

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

css：

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

上面的 css 代码将 Facebook 小部件显示在其他所有内容之上，而无需重新定位或“溢出”任何内容。

Answer 6

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