「clearfix」のIE 7対策

Post on:2006年10月19日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

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; <span class="accent1">min-height:1%; /* for IE 7*/</span> } /* Hides from IE-mac \*/ * html .clearfix{height: 1%;} .clearfix{display: block;} /* End hide from IE-mac */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

.clearfix{
    display:inline-block;
    <span class="accent1">min-height:1%;  /* for IE 7*/</span>
}

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