ソーシャル・マーケティング協会 代表理事 白鳥友康の公式ブログ。Facebook、Twitter、YouTube、LINEなど、ソーシャルメディアを活用、集客する方法を無料でお届け。

ソーシャル★マーケティングの教科書 改訂版

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万円で提供していた【ソーシャル・マーケティング認定コンサルタント養成講座】のエッセンスを凝縮した動画を無料プレゼントしています。

ダウンロードはこちら

  関連記事

Zemanta Related Posts Thumbnail
便利なjQueryプラグインとチュートリアル45個

ツールチップとか、いろいろ使ってみたいものがたくさん。jQuery楽しいなぁ。 ■UIをブラッシュアップする便利なjQueryプ…

2015-12-08 20.05.00
ホームページを外注したいけれど、いくら掛かるのか不安…

コンサルタントとして独立して活動すると、契約を結ぶ際にウェブサイト制作を一緒に受注することは意外と多いもの。でも、ウェブサイトの…

no image
リンクに良く使われている「>>」記号をHTMLで表示する方法

リンクの部分に「»」という記号を「>>」のように2文字ではなく、1文字で表示したい。 そんなときには。 …

Zemanta Related Posts Thumbnail
XREAで独自ドメインを設定する方法

★XREAで独自ドメインを設定する方法 VALUE-DOMAIN で取得したドメインを、XREAに設定する方法です。 まだドメイ…

o0800077110456654354
ColorBar Generator ? カラーバージェネレーター ?

ColorBar Generatorは、好きな画像からその画像のイメージに合うようなオシャレ(死語)カラーバーを生成します。 適…

no image
クリックしたくなるバナーボタンの色は?

成約率にとても大きな影響を与える「お申し込みボタン」 このボタンがどんなボタンかで、クリックされる数が変わってくるのでいろいろ工…

no image
売れるランディングページを作るコツ

ランディングページのデザインには、いくつかコツがあります。この基本的な内容を抑えておくだけでも、相当に成約率が変わってくるはず。…

email icon post sign
エントリーフォーム最適化(EFO)でお問い合わせの数を増やす。その1

ウェブサイトの改善では「入口」と「出口」を最適化することが最も重要です。「入口」の話は、SEOやら、PPCやら、いろいろあるので…

スマートフォン
これが、最適化されたスマホ版サイトだ。

ホームページのスマホへの対応も無視できないレベルになってきました。画面の大きさ、入力方法の違い、などなど、スマホで閲覧した時に快…

2015-06-12_210958
【制作事例】 吉方位引越し!ハッピー☆エナジー方位盤|ハッピー☆エナジー

吉方位引越し!ハッピー☆エナジー方位盤|ハッピー☆エナジー ★ウェブサイト制作・デザイン・HTMLコーディング・Google M…