先日修正したソーシャルボタン。
一見無事に動いている様でしたが、フェイスブックのボタンを押した時に問題があることに気がつきました。
リンクを共有する際にコメントを記入できるように吹き出し（コメント欄）が出るのですが、それがちゃんと表示されない・・・
途中で切れてるんですよね。
サイドバーの所では右側が切れる。
単記事の所では下側が切れる。
なんだこりゃ？という事で色々調べたり、悩んだり。
一般的には「iframe」要素に「max-width:100%」とかが指定してあると親要素の幅による制限を受けるそうで、
.fb_like iframe { max-width:"none !imortant"}
とかやると改善するらしいです。
私の風邪は喉から。
じゃなくて、私の場合はそれでは全く改善されず。
で、よーーーーくみてみると。
確かに親要素の横幅で切れている。
で、その親要素って厳密にどれよ？と見ていきました。
私のウェブサイトは現在２カラム構成。
右と左で分かれているのですが、どうやらその２カラムを分けるdivまで遡ります。
でも、floatやpositionって親要素から浮いている感じになるんじゃ？
あれ？って事でどうやら「overflow」の設定が怪しいことに気がつきました。
でも、overflowなんて、ナビゲーションを並べたりする要素にしか使ってないし・・・
ぴきーーーーーーん！
く、クリアフィックスっすかΣ(゜д゜；)
私のcssにはclearfixが設定されています。
当時色々調べて、それなりの物を設定したつもりなのですが、ここにありました。
overflow:"hidden"が。
これを削除したらあっさり解決。
私の２時間を返して。
クリアーフィックス的にもたぶん問題無いのか？
とりあえず、これで様子を見ます（´・ω・｀）
0コメント