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

Post on:2009年12月10日

旧タイプのclearfix

<textarea name="code" class="css" cols="60" rows="5">
.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 */
</textarea>

.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 */

</textarea>

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

新タイプのclearfix

<textarea name="code" class="css" cols="60" rows="5">
/* 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 */
</textarea>