アイデアの甕

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

【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

 

奥深い。

広告を非表示にする