「clearfix」のIE 7対策

CSSで、フロートした要素がはみ出してしまうのを回避させる「clearfix」のIE 7対応版です。

「clearfix」の解説ページ
Clearing a float container without source markup（Position Is Everything）

「clearfix」のIE 7対策方法

• 「.clearfix」に「min-height:1%;」を追加します。

.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

.clearfix{
    display:inline-block;
    min-height:1%;  /* for IE 7*/
}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */

Post on:2006年10月19日