ページを選択

ストブロ

Coffee's Blog.

facebookのソーシャルボタン、コメント欄が切れる問題

執筆者 | 2014年04月01日 | ストブロ

先日修正したソーシャルボタン。
一見無事に動いている様でしたが、フェイスブックのボタンを押した時に問題があることに気がつきました。

リンクを共有する際にコメントを記入できるように吹き出し(コメント欄)が出るのですが、それがちゃんと表示されない・・・
途中で切れてるんですよね。

サイドバーの所では右側が切れる。
単記事の所では下側が切れる。

なんだこりゃ?という事で色々調べたり、悩んだり。

一般的には「iframe」要素に「max-width:100%」とかが指定してあると親要素の幅による制限を受けるそうで、
.fb_like iframe { max-width:"none !imortant"}
とかやると改善するらしいです。

私の風邪は喉から。
じゃなくて、私の場合はそれでは全く改善されず。

で、よーーーーくみてみると。
確かに親要素の横幅で切れている。
で、その親要素って厳密にどれよ?と見ていきました。

私のウェブサイトは現在2カラム構成。
右と左で分かれているのですが、どうやらその2カラムを分けるdivまで遡ります。

でも、floatやpositionって親要素から浮いている感じになるんじゃ?
あれ?って事でどうやら「overflow」の設定が怪しいことに気がつきました。

でも、overflowなんて、ナビゲーションを並べたりする要素にしか使ってないし・・・

ぴきーーーーーーん!

く、クリアフィックスっすかΣ(゜д゜;)

私のcssにはclearfixが設定されています。
当時色々調べて、それなりの物を設定したつもりなのですが、ここにありました。
overflow:"hidden"が。

これを削除したらあっさり解決。
私の2時間を返して。

クリアーフィックス的にもたぶん問題無いのか?
とりあえず、これで様子を見ます(´・ω・`)

第11回「SSDへの換装」

レンタルサーバーforビギナーズ 第11回「SSDへの換装」 HDDからSSDへシステムドライブを移設したお話を。 レンタルサーバーやVPSサービスの話から少し離れ、 今回はパソコンのお話。...

SSDへの換装の感想

これまでHDD1台を2つのパーテーションに分けて使っていました。 500GBのハードディスクの内200GBをCドライブ(システム)300GBをDドライブ(データ用)に。...

第10回「レンサバ、迷惑メール対策」

※第16回「maildrop、mailfilterによるメール振り分け 完成版」で、もう一度詳しく説明しています。そちらもご覧下さい。 レンタルサーバーforビギナーズ 第10回「レンサバ、迷惑メール対策」 MailDropを利用した迷惑メール対策について...

Gメールご利用の皆様へ

Gメールご利用の皆様へ 現在当アドレス(~@inst-web.com)から送信したメールが Gメールにて『迷惑メール』に判定され、 迷惑メールフォルダーへ入れられてしまう不具合が発生しています。 お問い合わせフォームをご利用頂いたりした際に、...

電器屋Walkerにアクセス時のエラーについて

平素より弊局INST-webをご愛顧頂きまして誠に有り難うございます。 ここ2ヶ月程、電器屋Walkerの配信時に予期せぬ不具合が発生しておりましたので ご報告申し上げます。 ※この問題は既に解決済みです。 不具合内容:...

マインクラフト設置マニュアル第6回

さくらのVPS、マインクラフト設置マニュアル第6回 レンタルサーバーforビギナーズ 第06回「CraftBukkit導入・PermissionsEX」 今回は ・CraftBukkit導入 ・必須(おすすめ)プラグイン  「PermissionsEX」...

INSTマイクラサーバー ひっそり再オープン

何が良かったのが、何が悪かったのか。 何がいけなかったのかよく分からないけど、 とにかくモディファイワールドが上手く動いている様なのでINSTマイクラサーバーの ホワイトリスト制限を解除しています。...

0コメント


電器屋Walkerの過去配信のBGMで利用させて頂いております。

ポッドキャスト品質向上、整音テクニック 解説Live

開催のお知らせ

詳細はこちら

国際ポッドキャストの日

International Podcast Day Event

ツキイチ - 隣のポッドキャスト

まとめファンサイト