3

所以，我想在彼此旁边设置一个类似 Facebook 的按钮(html5) 和一个 Twitter 推文按钮。

一切都在这里设置：http: //jsfiddle.net/tGujU/

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

但问题是，一旦你点击了 facebook like 按钮，你就不能再点击 tweet 按钮了，因为宽的 facebook iframe 覆盖了它。

我尝试了什么：

  • 使用overflow:hidden，div#facebook_button但是，我看不到评论弹出窗口。=> 不合格。
  • 更改 iframe z-index 以获得顶部的 twitter iframe => 无效。
  • 在 FB iframe 上添加一个侦听器以尝试overflow:hidden在正确的时间设置并在需要时将其删除，但无法找到侦听其更改的方法。

我想做的事：

  • 保持供应商的顺序，不要把 Facebook 放在右边。
  • 单击“赞”按钮后，请查看 FB 评论弹出窗口。
  • 单击 FB 按钮后能够单击推文按钮。
  • 支持 IE8+、FF4+ 和 Chrome。

欢迎任何帮助。

4

4 回答 4

1

您可以抬起z-indexTwitter 按钮 ( iframe) 的 ，使其高于任何 Facebook 内容。

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

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

于 2012-09-10T00:22:27.470 回答
0

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

于 2012-09-10T03:09:37.743 回答
0

这是我倾向于做的...

/* 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 的第一位按您想要的大小调整like 按钮的大小（在这种情况下，它的大小是为了隐藏计数气泡）。CSS 的第 2 位确保单击按钮时评论框可见。

于 2013-01-04T20:15:14.103 回答
-1

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

于 2012-09-07T08:28:57.957 回答