3

そこで、 Facebookのいいねボタン(html5)とTwitterのつぶやきボタンを並べて配置したいと思います。

すべてがここに設定されています: http://jsfiddle.net/tGujU/

Facebookのいいねボタンをクリックすると、大きな問題が1つあります。
コメントのポップアップが表示されるため (ポップアップを表示したい)、facebook の iframe は450px にサイズ変更されます。ポップアップが消えると、iframe のサイズは小さくなりません。2つのボタンの間に大きな隙間ができないデザインにしました。

しかし、問題は、Facebookのいいねボタンをクリックすると、広いFacebook iframeがそれを覆っているため、ツイートボタンをクリックできなくなることです。

私が試したこと：

  • で使用overflow:hiddenしdiv#facebook_buttonますが、コメントのポップアップが表示されません。⇒NG。
  • 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 の最初の部分では、好きなようにボタンのサイズを変更します (この場合は、カウント バブルを非表示にするサイズになっています)。CSS の 2 番目のビットは、ボタンがクリックされたときにコメント ボックスが表示されるようにします。

于 2013-01-04T20:15:14.103 に答える
-1

120pxの固定幅にしてみましたか？それでカバーできると思います

于 2012-09-07T08:28:57.957 に答える