IE6でclearfixのためにoverflow:hidden指定するときの注意事項
投稿日時:
最終更新日時:2014/08/04 15:08
この記事は約 2 分で読めます。
大丈夫、あなたなら出来る!
ソーシャル・マーケティング協会 代表理事の白鳥友康です。
要素をfloatしたときに、その親要素に overflow:hidden; を設定することは良くあると思います。その際は、InternetExplorer 6(IE6)の時だけ注意が必要。
overflow:hidden; を設定した要素の hasLayout が On になっていないと clearfix の効果がありません。こんなときは IEバグの魔法の呪文 zoom:1; を指定しましょう。
★HTML
<div class="box"> <img src="img/photo.jpg" class="photo" alt="" /> <p>dummy text. dummy text. dummy text. dummy text. dummy text. dummy text. dummy text. dummy text. dummy text. dummy text. dummy text. dummy text. dummy text. dummy text. </p> <!-- /[.box] --></div>
★CSS
.box {
overflow:hidden;
zoom:1; /* for ie6 */
}
.box .photo {
float:left;
width:100px;
margin:0 10px 10px 0;
}
◯clearfixでfloatを解除 | d-spica
http://blog.d-spica.com/entry/070307clearfix.html
無料プレゼント
【Web担当者向け】SNS集客の全体像を55分で把握できる動画
受講料50万円で提供していた【ソーシャル・マーケティング認定コンサルタント養成講座】のエッセンスを凝縮した動画を無料プレゼントしています。
関連記事
-
-
2011年11月最新ニールセン調査。いつもお世話になっています。
10月の調査でmixiの数値が激減したことで「mixiオワタ」的な盛り上がりを見せていましたが、そもそもの計測方法が間違っていた…
-
-
HTML5のcanvasでランキング描画 – まつぼっくりんご
こうゆうのは後々使うときありますね。canvasはアイディア次第でいろいろと。 HTML5のcanvasでランキング描画 …
-
-
売れるランディングページを作るコツ
ランディングページのデザインには、いくつかコツがあります。この基本的な内容を抑えておくだけでも、相当に成約率が変わってくるはず。…
-
-
Web製作会社を選ぶ面白い視点
常にすべてのテキストを理想のコントラスト比でデザインしなければダメ。というわけではありませんが「可読性に気を配るっているかどうか…
-
-
★ホームページ診断で必ずチェックしたい指標
弊社でウェブサイト診断を行う際のチェック項目は、たくさんあるのですが、まずはアクセス解析のデータをチェックして欲しいです。 アク…
-
-
これが、最適化されたスマホ版サイトだ。
ホームページのスマホへの対応も無視できないレベルになってきました。画面の大きさ、入力方法の違い、などなど、スマホで閲覧した時に快…
-
-
★ウェブサイトの情報をCSVでダウンロードして利用する。
例えば、ある地域にある不動産の物件情報をExcelなどを利用して自社で解析したいとする。対象のデータは、賃貸ポータルサイトの検索…
-
-
ホームページ色名一覧
ホームページで使う色を16進数で指定するのが難しい人のために慣用名でも指定することが出来るようになっています。 考えた人は偉いで…
-
-
jQueryを使ってサイトツアーを作る方法
これはいつか使いそう。 というか、必ず使いたい! jQueryを使ってサイトツアーを作る方法 – IDEA*IDEA…
-
-
テキストを変更するだけでそのまま使えるボタン素材いろいろ(PSDファイル付き)
お申し込みボタンはサイトの成約率に与える影響がとても大きい部分ですよね。 初心者の方が作ったサイトでも、お申し込みボタンだけは整…

