2006年11月19日

【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版]

僕が主要ブラウザをclearするコードと読んでいる擬似要素を使った方法はclearfixというそうです。実は先日外注さんから教えていただきました。

で、今回のclearfixなんですがIEには独自拡張でzoomというプロパティが用意されているのは少しCSSをかじったかたならご存知の方も多いと思うのですが、

このzoomは実はなかなか優れものです、具体的な使い方は以下から。

詳しい説明は省きますが何度か言っているIEびっくりするくらいいうことを聞く呪文、
この呪文実はzoomでも代用できる事がわかりました。

zoomはIE 5.5以上に対応したプロパティなのですが 具体的にはこう記述します。

div { zoom : 1 ; }

これは1倍に拡大表示、すなわち今のままという事です。

以前min-heightを利用した方法を紹介しましたが、
zoomはIE5.5～7までの独自拡張ですので特にハックの必要性がなくソースの行数が多少縮小されるメリットがこれで得られます。

そして以下にまとめとしてコピペでつかえるようにコードを記しておきます。

div{
    zoom:1;/*for IE 5.5-7*/
}
div:after{/*for modern browser*/
    content:".";
    display: block;
    height:0px;
    clear:both;
    visibility:hidden;
}

みなさん有効利用してください。

4トラックバック

このブログ記事を参照しているブログ一覧: 【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版]

このブログ記事に対するトラックバックURL: http://kennsu.jp/mt/mt-tb.cgi/58

» float を使う時の注意点 [ clearfix ](Bowz::Weblog)~のトラックバック

float を使った時は、float させた div の親にあたる div 内で clear しないと表示がおかしくなる... 続きを読む

2007年2月22日 19:57
» IE7のclearfix(link-log powered by fullsizeimage.inc)~のトラックバック

CSSで僕が今まで使っていたclearfixは以下の様なものでした。 ------------------------------------------... 続きを読む

2007年5月15日 10:00
» clearfix(おっちゃんのメモ帳)~のトラックバック

ふらふらとCSSのテクニックを探っていたらclearfixという手法を発見したのでのしておきます。 clearfixとは親要素の背景や枠が途中から出なくな... 続きを読む

2007年7月21日 20:39
» DreamweaverCS3のclearfix使用時デザインビューはイケてないけどSpryはイケてる件(SAKOTSU INSPIRE BLOG)~のトラックバック

DreamweaverCS3のデザインビューが、相変わらずclearfixに対応してくれてなくてレイアウト崩れを起こしちゃうのが残念な件ですよ。 ... 続きを読む

2008年3月19日 15:38

コメントする