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万円で提供していた【ソーシャル・マーケティング認定コンサルタント養成講座】のエッセンスを凝縮した動画を無料プレゼントしています。
関連記事
-
-
Web製作会社を選ぶ面白い視点
常にすべてのテキストを理想のコントラスト比でデザインしなければダメ。というわけではありませんが「可読性に気を配るっているかどうか…
-
-
テキストを変更するだけでそのまま使えるボタン素材いろいろ(PSDファイル付き)
お申し込みボタンはサイトの成約率に与える影響がとても大きい部分ですよね。 初心者の方が作ったサイトでも、お申し込みボタンだけは整…
-
-
【制作事例】 吉方位引越し!ハッピー☆エナジー方位盤|ハッピー☆エナジー
吉方位引越し!ハッピー☆エナジー方位盤|ハッピー☆エナジー ★ウェブサイト制作・デザイン・HTMLコーディング・Google M…
-
-
Facebookカバー画像もPhotoshop無しで簡単に作れる
Facebookのカバー画像は、あなたの魅力を伝えるのに効果的。 通常は、Photoshopなどの画像編集ソフトを使って作成する…
-
-
3大ブラウザのJavaScript実行速度について
昨日、各ブラウザの特徴を説明しましたが、 IE、Firefox、Chrome 3大ブラウザ対決 JavaScriptの実行速度に…
-
-
2011年11月最新ニールセン調査。いつもお世話になっています。
10月の調査でmixiの数値が激減したことで「mixiオワタ」的な盛り上がりを見せていましたが、そもそもの計測方法が間違っていた…
-
-
HTML5で廃止予定の要素と属性
ブログなどを使って投稿すると、自動的に挿入されてしまうタグが多数ありますね。 現在でも推奨はされていないが、頻繁に使われているタ…
-
-
ウィンドウを2分割して表示するChromeのアドオン「Split Screen」
ホームページ制作をしていると、表示のチェックするために複数のブラウザウィンドウを開くので、デスクトップにウィンドウがたくさんあっ…
-
-
素人でも簡単にロゴが作成できる便利なサービス
何かのサービスを立ち上げるの時には、ロゴが必要になることが多いので、こういったサービスは嬉しいですね。ある程度のデザインセンスは…
-
-
アンカーリンクをクリックした時にスクロールして移動する
ウェブサイトには、クリックするとページ内の指定の場所に移動する「アンカー」という機能がありますよね。 この機能は、普通に指定する…