F.Ko-Jiの「一秒後は未来」

FacebookのLike Boxが右に半分ズレてる場合の対処法

何かFacebook側のコードで変更があったのか、ブログに設置しているLike Boxが右に半分ズレていました。

facebook-like-box-bug.jpg

↑ なんでw?

Chromeの要素の検証で原因になっているCSSの記述を探ってみると、.fb_iframe_widget iframe に指定されている { position:absolute; } を無効にすると元に戻ります。

その iframe の親要素にある span タグから iframe を外に出せば戻るのですがそれはできないので、次のような CSS の上書きで暫定対処をしました。

.fb_iframe_widget iframe { position:static !important; }

他のサイトを見てみるとズレてるサイトとズレてないサイトがあって、サイトごとのCSSの指定によって変わってるのかなと思いつつも明確な原因がわかりません。

というわけでご参考までに。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

著者について

fkoji

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity電車遅延なう梅酒.in#グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など