【2017】フェイスブックの「いいね!」や「シェア」ボタンが下にずれる
最近(2017年1月時点)、Facebookのいいね!ボタンが下にずれている例が散見されます。
これまで揃って(揃えて)いたのだけれど、急にそろわなくなったね的なそろってなさ。
過去にもそのような事例はあったようで。
過去(2014年)の事例
下記サイトに同じような内容の記載がありました。
修正?ではなく対応方法的なのですが、このズレの問題はボタン内で利用されている
vertical-align
がbottom
で設定されていることで起きているので、それの対応をします。
というわけでだったらしいのです。
ただ、今現在…かどうかわからない(Facebookでは頻繁にアップデートがあるため、JavaScriptのバージョン?次第でかわってくるのかもしれない)のですが、取り敢えずv2.4というちょっと前のやつ?ではvertical-align
はデフォルトでbaseline
になっており、上記サイトの解決策を講じる意味はありません。
いやいや、これで治りましたね。
見るところ間違ってました。失敬失敬。span要素のstyle属性でしたね。すみません。ズレは今でもこれで解消します。
※2017.1.14時点で下記サイトからJavaScript SDKを表示させると「v2.8」になっているので、これだとどうなるのか試していません。悪しからず。
現状の対応策
ただ、2014年時点で問題となったのと同じ部分のCSSを見てみると、display: inline-block
の設定がありまして。
.fb_iframe_widget {
display: inline-block;
position: relative;
}
現実的にはこれをdisplay: inline-flex !important
とでもして上書きしてやれば解消するはず。
こんな感じで。
治らなかったら…すみませんご自身で解決策を探ってみてください。
ボタン類の親要素にdisplay:flex;設定して…という方法もありそうな。
奥深い。