: サイト構築 -CSS

[CSS]floatを解除する「clearfix」のIE6/7に対応した改良版

floatを解除する際にclearを使用せずに解除する「clearfix」の改良版をPerishable Pressから紹介します。

いわゆる旧タイプのclearfixはMac IEも対応ブラウザに含まれているため、スタイルシートは下記のようになります。

旧タイプのclearfix

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
.clearfix { display: inline-table; }
/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

上記のスタイルシートからMac IEの対応をはずし、新たにIE6/7へのスタイルシートを追加したものが改良版の新タイプになります。

新タイプのclearfix

/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

IE6/7用のスタイルシートはhasLayoutの値をtrueにするものです。hasLayoutの詳しい説明は以前のエントリーを参照ください。
IEでのCSSのバグを回避するhasLayout

Post on:2009年12月10日