アイデアの甕

アイデアを放り込んでおくと甕は腐臭を発しない

当サイトではアフィリエイトプログラムを利用して商品を紹介しています。

【2017】フェイスブックの「いいね!」や「シェア」ボタンが下にずれる

最近(2017年1月時点)、Facebookのいいね!ボタンが下にずれている例が散見されます。

 

f:id:bukki:20170114163406p:plain

 

これまで揃って(揃えて)いたのだけれど、急にそろわなくなったね的なそろってなさ。

 

過去にもそのような事例はあったようで。

 

 

過去(2014年)の事例

下記サイトに同じような内容の記載がありました。

 

h2ham.net

 

修正?ではなく対応方法的なのですが、このズレの問題はボタン内で利用されている vertical-alignbottom で設定されていることで起きているので、それの対応をします。 

 

というわけでだったらしいのです。

 

ただ、今現在…かどうかわからない(Facebookでは頻繁にアップデートがあるため、JavaScriptのバージョン?次第でかわってくるのかもしれない)のですが、取り敢えずv2.4というちょっと前のやつ?ではvertical-alignはデフォルトでbaselineになっており、上記サイトの解決策を講じる意味はありません。

 

いやいや、これで治りましたね。

 

見るところ間違ってました。失敬失敬。span要素のstyle属性でしたね。すみません。ズレは今でもこれで解消します。

 

※2017.1.14時点で下記サイトからJavaScript SDKを表示させると「v2.8」になっているので、これだとどうなるのか試していません。悪しからず。

 

developers.facebook.com

 

現状の対応策

ただ、2014年時点で問題となったのと同じ部分のCSSを見てみると、display: inline-blockの設定がありまして。

 

.fb_iframe_widget {
display: inline-block;
position: relative;
}

 

現実的にはこれをdisplay: inline-flex !importantとでもして上書きしてやれば解消するはず。

 

f:id:bukki:20170114163512p:plain

 

こんな感じで。

 

治らなかったら…すみませんご自身で解決策を探ってみてください。

 

ボタン類の親要素にdisplay:flex;設定して…という方法もありそうな。

 

mamewaza.com

 

奥深い。