Facebookの「いいね」ボタンを設置したら、ボタンを押した時にポップアップで出てくるコメント欄が隠れていたので改善策を探してみた。
【Facebook】「いいね！」ボタンのコメント欄が隠れる（切れる）表示されない場合の修正方法3種類
「いいね！」ボタンのコードが記述されている親の<div>に overflow: hidden; が指定されている場合があります。これを overflow: visible; に変更します。
まあ、たぶんコレだろう。
ただ、SNSのボタンをdivタグで囲んでfloatにしていたので、こう出来なかったのよ。
divをfloatで並べた場合、高さがなくなってしまうので、次のコンテンツに入り込んでしまう。
これの解決策はコレだと思ったのだが
[CSS]overflowを使ってfloatの問題を解決するスタイルシートのテクニック
次のデモでは、「overflow: auto;」をラッパーとなるコンテンツに加えることで、問題を解決しています。
おそらく、これがフロートの問題を解決する一番簡単な方法でしょう。
2つのサイトで違う指定を指示されてしまった。
結局こうなった。
<div class="sns_button">
<div class="hatena">はてな</div>
<div class="fb-like">facebook</div>
<div class="pocket">pocket</div>
</div>
<div class="under_sns">
次のコンテンツ
</div>
.sns_button{
overflow: visible;
}
.under_sns{
clear:both;
}
.fb-like{
float:left;
}
.pocket{
float:left;
padding: 3px 0 0 10px;
}
.hatena{
float:left;
padding:3px 10px 0 0;
}
現在これでSNSボタンを貼り付けています。