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

ダウンロードはこちら

  関連記事

no image
ホームページ色名一覧

ホームページで使う色を16進数で指定するのが難しい人のために慣用名でも指定することが出来るようになっています。 考えた人は偉いで…

2015-04-17_081735
ウェブサイトの出口をしっかり整理する

ウェブサイトは、入口と出口が最も重要です。多くのウェブサイトは、お問い合わせフォームが出口になることが多いですよね。そういったメ…

Zemanta Related Posts Thumbnail
VALUE-DOMAINでドメインを取得する方法

○空きドメイン検索 こちらのページから取得したいドメインを検索してみましょう。  ↓ ↓ ↓バリュードメイン 「希望ドメイン名」…

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

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

HTML5のcanvasでランキング描画 – まつぼっくりんご

こうゆうのは後々使うときありますね。canvasはアイディア次第でいろいろと。 HTML5のcanvasでランキング描画 &#8…

post_h268_20130103
Facebookだけじゃダメ。他のメディアも使わないと!

Facebookを活用して集客することはもちろん可能ですが、Facebookは他のメディアと組み合わせてこそ、その本領を発揮しま…

2015-03-16_204043
JavaScriptでマルチバイト文字列を決まった長さで省略する方法

ブログの「続きを読む」みたいなことを、JavaScriptで実現する方法です。 デザインの都合でエリアに入力できる文字数が決まっ…

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

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

2011年11月最新ニールセン調査。いつもお世話になっています。

10月の調査でmixiの数値が激減したことで「mixiオワタ」的な盛り上がりを見せていましたが、そもそもの計測方法が間違っていた…

no image
Photoshop無料レイヤースタイル&ベクトルデータ&ブラシ&プラグインまとめ

目次1 レイヤースタイル集2 ベクトルデータ集3 ブラシ集4 プラグイン集5 グラデーション6 塗りつぶしパターン集7 アクショ…