2008 Aug 05

仕事用のメモ書きですので、興味のない方はさらっと流してください(´―`;)

HTML作成をCSSコーディングで行う際に、float指定をするとレイアウトが崩れるといった現象がおきちゃいます。
これを解決するのに『clearfix』コードを使う事で、崩壊を止めるっていうのは、CSSコーディネーターなら誰でも知ってそうな感じなんですが。

実は...『clearfix』コードを使わなくても、CSSコーディングは出来るんですよ(*'-')
実際にほとんど使わなくなった人がココにいます(/ω\)

「float指定をするとレイアウトが崩れるといった現象」は何故起きるのか?
この辺りを理解して、『clearfix』コードを利用する事でどういった効果がでるのか...
この辺りが理解できれば、いくらでも回避方法はあります。デザインに制限がでますが(´―`;)

まーこの辺りに興味がある方は、他のウェブサイトでも覗いてみてくだされ(笑)
今回の記事の本題は別なのだ(笑)

いま作成してるサイトでは、デザイン上『clearfix』コードを使わないと、CSSコーディング出来ない仕様なので、ウチのサイトで設置しているコードをコピペして持ってきてみたら

ちょいバグがイロイロとーヽ(;´д`)ノギャース

2年ぐらい前になるのかな...この『clearfix』コードは。
Firefox印刷プレビューのレイアウト崩壊させる事が判明したのと、IE7は未対応。

うーん。これは困るので、ちょっといろいろ探ってみました(=ω=)

IE7に関しては、どうもIE5.5からの独自のプロパティ「zoom」を使うと解決するらしいー...

ということで、STOPN' LISTENさんの記述を参考に、IE7対応の表記はこんな感じ。

.clearfix { zoom : 1 ; } 

それプラス!
いままで記述してた分の整理されてた、norisfactoryさんの記述を含めて...
その集合体がこちら〜(*'-')ノ

/* =========== フロートバグ補助 =========== */
	
.clearfix:after { /*--新しいブラウザ用--*/
	content: url("../img/spacer.gif");
	display: block;
	clear: both;
	height: 0;
	}	
	
.clearfix{ /*--IE用--*/
	zoom:1;/*for IE 5.5-7*/
	display: inline-table;}

/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}
.clearfix {display: block;}

/* End hide from IE-mac */


「content」の表記の所を空白にしてしまうと、Netscapeに非対応になるので、テーブル組みをしてた人には同じみの1×1ピクセルの透明GIFを指定しています。norisfactoryさん、すごすぎ!(*'-')b
ありがたーく使わせて頂きます_(._.)_

ウチのサイト「無限の翼」では、このまま記入しているのですが、いまさらMacIE5に対応しなくても良いかもしれないので、対応部分は消してしまっても良いかもです(´―`;)
MacIE5は、Flashプレイヤー等のプラグイン関係がほぼサービス対象外になっちゃったので、ウェブサーフィンするには辛過ぎる現状だったり。

で、MacIE5対応部分を消したのがこちら

/* =========== フロートバグ補助 =========== */
	
.clearfix:after { /*--新しいブラウザ用--*/
	content: url("../img/spacer.gif");
	display: block;
	clear: both;
	height: 0;
	}	
	
.clearfix{ /*--IE 5.5-7--*/
	zoom:1;}

とりあえず、これを外部cssファイルにでもコピペしておけば、次の新しいブラウザが登場するまでの間は、flaotバグに悩まされることはないハズ!...たぶん(笑)

あー
指定のブロックタイプ(div)とかにclass指定で「clearfix」の記述しないと何もならないので(笑)

◎参考サイト様

【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版]:::STOPN' LISTEN:::
http://kennsu.jp/2006/11/ie7clearfixclear.html

スタイルシートをめぐる冒険: clearfixの決定版を作る -モダンブラウザ編-
http://norisfactory.com/stylesheetlab/000038.php

TrackBack

このエントリーのトラックバックURL; http://mtw.cocotte.jp/cgi-bin/mt4/mt-tb.cgi/328
このエントリーのリンクURL: http://mtw.cocotte.jp/blog/diary/html/2008/08/05-2117.php

Comment

■コメントを投稿

  コメントをプレビュー

ご利用のブラウザ、設定ではコメントのリアルタイムプレビューはご利用になれません。


画像の中に見える文字を入力してください。

Amazon オススメ人気RANKING BEST8

Amazon ねんどろいど人気RANKING BEST8

Site Search

Tag Cloud


2002.6.6 count start