Question

所以，我想在彼此旁边设置Facebook like button（html5）和Twitter推文按钮。

当我点击像facebook这样的按钮时，我遇到了一个大问题因为它会显示评论弹出窗口（我想看到弹出窗口），facebook iframe然后调整为450px 。弹出窗口消失后， iframe不会调整为小尺寸！我设置了设计，因此两个按钮之间没有创建大空间。

但问题是，一旦你点击facebook like按钮，你就不能再点击推特按钮，因为宽facebook iframe正在覆盖它。

我尝试了什么：

在overflow:hidden上使用div#facebook_button，但之后，我无法看到评论弹出窗口。 =＆GT; NG。
更改iframe z-index以获取顶部的Twitter iframe =＆gt;没用。
在FB iframe上添加一个侦听器，尝试在正确的时间设置overflow:hidden并在需要时将其删除，但无法找到听取其更改的方法。

我想做什么：

按照此顺序保留提供商，而不是将Facebook置于右侧。
点击按钮后，查看FB注释弹出窗口。
点击FB按钮后点击推文按钮。
支持IE8 +，FF4 +和Chrome。

欢迎任何帮助。

Answer 1

您可以提高Twitter按钮z-index（iframe），使其高于任何Facebook内容。

#twitter_button iframe{
  z-index:9999;
  position:absolute
}

不是最漂亮的解决方案，但它有效（请参阅Fiddle）。

Answer 2

.fb-like { width: 75px; }就是我做的。

Answer 3

这是我倾向于做的......

/* make the like button smaller */
.fb_edge_widget_with_comment iframe {
    width:47px !important;
}
/* but make the span that holds the comment box larger */
.fb_edge_widget_with_comment iframe.fb_iframe_widget_lift {
    width:450px !important;
}

CSS的第一位按需要调整类似按钮（在这种情况下，它的大小可以隐藏计数气泡）。 CSS的第二位确保在单击按钮时可以看到注释框。

Answer 4

你试过给它一个120px的固定宽度吗？我认为这将涵盖它

如何避免像按钮iframe的facebook，以克服旁边的其他按钮？

4 个答案: