2008年11月17日

【CSSテクニック】clearfixをモダンブラウザに対応させました

おひさしぶりですkennsuです。
2年くらい前に公開して放置していたこちらの記事ですが、

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

最終版とか言いながらネットは日々進化したり僕に落ち度があったりなんだかんだで最終版から更新しました。

以下がコードですので、コピペして使ってくださいね。

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

どこを変更したかといいますと、ここの部分↓

    line-height:0;

この指定がないとSafariなど一部のブラウザで要素の下に隙間ができてしまうケースがあるので、
必要な指定なんです。

自分で使うときは結構前から上記のコードを使っていたんですが、
こないだ京都支社にいった時に後輩が「変な隙間ができる～」と泣きついてきたので、
まさかと思って聞いてみると僕のblogからコピペしたとのこと。

その他「Re:creators Kansai」の方々も結構ウチからコピペしてつかっているとのことなので、
こりゃあ直しておかないといかんぞと。

と、いうわけでみなさんコッチをブクマしてくださいね！

あ、CSSやHTMLを学び始めた方、これから学びたいなという方は、
最近でた下の本、かなりオススメです！

現場のプロから学ぶXHTML+CSS
現場のプロから学ぶXHTML+CSS
posted with amazlet at 08.11.17
益子 貴寛 堀内 敬子 小林 信次 千貫 りこ 伊藤 学 山田 あかね 西畑 一馬
毎日コミュニケーションズ
売り上げランキング: 447
おすすめ度の平均: 5.0
5 XHTML+CSS の正体が理解できました
5 究極のXHTML+CSS入門書
Amazon.co.jp で詳細を見る
Tags:

2トラックバック

このブログ記事を参照しているブログ一覧: 【CSSテクニック】clearfixをモダンブラウザに対応させました

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

» FirefoxやSafariなどモダンブラウザにも対応したclearfix(CSS Try and Clips)~のトラックバック

clearfixの書き方は色々ありますが、以前使っていたやつでSafariやFirefoxで表示した際、下に隙間ができるケースがあります。 どうやら ... 続きを読む

2008年11月18日 11:20
» [TODAY's TOPIC] 18 November, 2008(Movable Type 備忘録)~のトラックバック

CSSテクニック】clearfixをモダンブラウザに対応させました 高速な CSS セレクタエンジン「Sizzle」「Peppy」を試す CSS 3にお... 続きを読む

2008年11月20日 11:20

コメントする