fromピクセル

最近もっぱらスプラトゥーン2遊んでます

【CSS】フェイスブックのシェアボタンがレイアウト崩れる

急に振ってきたタスクで困ったものがあったので備忘録代わりに置いとく。 カテゴリはCSSじゃない気もするけど、CSSで解決を図ったのでCSSで。 しかも大分前からある問題っぽいのね…。

サイトに埋め込むタイプのシェアボタンの位置が、他のSNSシェア系のボタンより高さがズレてしまう問題。 色々見てみたけど、どうやら生成されるspanタグのstyleにvertical-align:bottomがいるのが原因っぽい。

時間なくて超力技で位置を整えたけど、帰宅後、他のサービスってどういう対処してるのかなと調べてみたら

spanにvertical-align:baseline !important; でbottomを打ち消し 確かにそうすりゃ良かった

h2ham.net

いいねボタンのズレを解消!たった1行追加するだけの方法とは。 - WordPressを用いたホームページ制作なら岡山県岡山市のOffise Kondo

line-heightもなのかぁ

これとは別問題で、いくつか並べるとなぜかフェイスブックのシェアボタンの次のボタンが段落ちするみたいになる問題が発生…。

他のボタンの時はそうならないので、フェイスブックのやつだけつらい。 その時は、#fb_rootをdisplay:none;したら段落ち解消されました。

いいね!ボタン周りでレイアウトが崩れたらとりあえず#fb-rootをdisplay:noneにすると良い : kosukekato.com : the idea espresso

ただこの方法、時々ボタンが表示されなくなるっぽい。厄介すぎる! display:none;しないほうが良いっていうのもあるっぽいんだけど…。 そもそもなぜこいつを消すときれいに表示されるのかがまだわからん!

とりあえず明日修正するかなー さすがにpositionで無理くりやるのはキレイじゃないわ。