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万円で提供していた【ソーシャル・マーケティング認定コンサルタント養成講座】のエッセンスを凝縮した動画を無料プレゼントしています。
関連記事
-
-
画像置換(text-indent)で出る点線を消したい
text-indent:-9999px; を使った画像置換はFirefox だとクリックした時に画面外へ点線が出てしまう。そんな…
-
-
エントリーフォーム最適化（EFO）でお問い合わせの数を増やす。その2
前回、エントリーフォーム最適化（EFO）の大切さについてお伝えしましたが、今回は実際にどの部分を修正すれば良いのかを説明していき…
-
-
リンクに良く使われている「>>」記号をHTMLで表示する方法
リンクの部分に「»」という記号を「>>」のように2文字ではなく、1文字で表示したい。 そんなときには。 …
-
-
マウスオーバーの魅せ方
中央に三つならんでいる写真にマウスオーバーすると･･･ Ajaxをうまく活用してますね?ｊQuery使用のようです。
-
-
ランディングページはやっぱりヘッドが命
クライアント様から依頼を受けて、月曜日にヘッドコピー部分のデザインを差し替えたランディングページがあるのですが、早速「2個売れま…
-
-
SEO対策するキーワードの選び方?メインキーワード編(2)
―知っておきたいSEO対策の基礎9 目次1 最初にコア用語を見つける2 前記事 最初にコア用語を見つける ブレインストーミングと…
-
-
JavaScriptでマルチバイト文字列を決まった長さで省略する方法
ブログの「続きを読む」みたいなことを、JavaScriptで実現する方法です。 デザインの都合でエリアに入力できる文字数が決まっ…
-
-
ホームページ制作の外注先を探すのが、とても楽な世の中になりました。
「クラウドソーシング」という言葉をご存知ですか？ クラウドは「Cloud（雲）」ではなく「Crowd（群衆）」のクラウドです。ウ…
-
-
【制作事例】 吉方位引越し！ハッピー☆エナジー方位盤｜ハッピー☆エナジー
吉方位引越し！ハッピー☆エナジー方位盤｜ハッピー☆エナジー ★ウェブサイト制作・デザイン・HTMLコーディング・Google M…
-
-
３大ブラウザのJavaScript実行速度について
昨日、各ブラウザの特徴を説明しましたが、 IE、Firefox、Chrome 3大ブラウザ対決 JavaScriptの実行速度に…
