ブログにFacebookのいいねボタンをつけて、ボタンを押すと自動でぴろっと出てくるコメント欄が途中で切れる現象に悩まされ、あちこち検索しても同じ状態で放置かコメント欄を隠しているサイト多数。
でも、なぜかうまく表示されているサイトもあり、何か解決策があるはずと思って、テスト用にHTMLを最小限にして該当するCSSを見なおしていったら、あちこちにoverflow: hidden;が入っている。これのせいでした(blog.cssの.assetに入ってるやつ)。
つまり、いいねボタンを含む要素自体にoverflow: hidden;があるとコメント欄が切れます。overflow: visible;で上書きすれば解決。
MTの標準CSSって余計な指定が多いんだよね。やっぱり自分で一から書かないとダメかしら。
いいねボタン自体が本文上などにあると、コメントを表示するスペースがあるということでCSSを直さなくても普通に使えます。
いいねボタンの配布先にもこんな説明もありました。
HTMLの端っこにあるとうまくいかないことがあるそうです。
If the Like button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting the overflow property to a value other than hidden, such as visible, scroll, or auto.
下:途中で切れたコメント欄
下:正常なコメント欄