昨日の日本の昼時に起きた Facebook の いいねボタンがずれる問題、問題自体は解決したのですが、ボタンが下にずれてしまう現象が発生していました。
Facebook の Like button（いいねボタン）がずれる現象が起きている – HAM MEDIA MEMO
こちらは自分の問題？と確認したところ、とあるプロパティが追加されたための問題のようだったので、現象の修正方法を書いておきます。
いいねボタンだけが下にずれてしまう時の修正方法
修正？ではなく対応方法的なのですが、このズレの問題はボタン内で利用されている vertical-align が bottom で設定されていることで起きているので、それの対応をします。
vertical-align を baseline に
下記スタイルをCSSに加えます。
CSS
.fb_iframe_widget > span {
vertical-align: baseline !important;
}この .fb_iframe_widget > span にあたる部分の style 属性に vertical-align: bottom; が直接入り込んでいるので、それ以上の強さにするために、 !important も必要になります。
並べている親要素へ対応する方法では？
ちなみに、vertical-align: bottom; でずれる原因は、親要素に必要以上に高さがある場合が原因の時もあるので、 line-height: 1; を並べているブロックにつけることもおすすめします。
この対応のみで、比較的ずれが解消されるのですが、微妙な感じでずれが残る場合があるので、 facebook のボタン自体にも vertical-alignの対応を入れる必要があるのです。
もう一つの対応方法
facebook vertical-align: bottom; が 入り込んでのずれであれば、他のボタンもそのラインに合わせることでもズレが解消される場合があります。
CSS
.parent-block > * {
vertical-align: bottom;
}.parent-block の部分は各自で設定しているソーシャルボタンを並べているブロックのセレクタを指定してください。
Facebook の仕様はちょくちょく変わるため、これらの変更を入れずに並ぶ時がくるかもしれないですが、 2014年2月8日現在は必要なため、もしずれている方は参考にしてください。
