NONtic blog(ノンティック): Facebook いいね！ボタンのコメント欄表示が切れてしまう理由 -overflow:hidden;-

2015/10/03

先日Facebook いいね！ボタンを押したときに出てくるコメント欄が切れて表示されないということが起こりました。

なんでだー！！？
とあれこれ調べてやっと解決したので、同じように困っている方のご参考になれば！

通常だとFacebookのいいね！ボタンを押すと、上の画像のようにコメント欄が現れます。
ところがなぜか下の画像のようにコメント欄が切れてしまって表示されない事態に！

今までもいいね！ボタンを設置したことはあったけれど、コメント欄が切れたことは今回が初めてのことでした。
ということで、以下がコメント欄が切れる理由と解決方法になります！

画像のようにソーシャルボタンを横並びにすることがあると思います。
今回はfloatを使ったのですが、floatのレイアウト崩れを回避するために一緒にoverflowをhiddenで高さを出していました。

【html】

<ul class="snsbutton">
  <li>twitter</li>
  <li>Facebook</li>
  <li>Google+</li>
</ul>

【CSS】

.snsbutton {
    overflow: hidden;
}
.snsbutton li {
    float: left;
}

ところが！そうすると、いいね！を押した際のコメント欄が切れてしまうではありませんか。原因はお分かりのようにoverflowをhiddenにしたことでした。

なので、ソーシャルボタンを横並びにする時はoverflow:hidden;ではなく、それ以外の方法でfloatを解除しなければFacebookのコメント欄が切れてしまいます。

修正後がこちらになります。

.snsbutton li {
    float: left;
}
.snsbutton:after {
    content: "";
    display: block;
    clear: both;
}

これでコメント欄も切れずに表示されました♪

2015/10/03