html - 如何避免像按钮 iframe 这样的 facebook 越过其他按钮？

Question

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

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

当我点击 facebook 赞按钮时，我遇到了一个大问题。
因为它会显示评论弹出窗口(我想看到弹出窗口)，所以 facebook iframe 得到 resized to 450px。弹出窗口消失后，iframe 不会调整为小尺寸!我设置了设计，因此两个按钮之间没有太大的空间。

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

我尝试了什么:

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

我想做什么:

• 让供应商保持这种秩序，而不是让 Facebook 处于正确的位置。
• 点击“赞”按钮后会看到 FB 评论弹出窗口。
• 能够在我点击 FB 按钮后点击推文按钮。
• 在 IE8+、FF4+ 和 Chrome 中支持它。

欢迎任何帮助。

Answer 1

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

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

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