DIGITAL NOTE BOOK

使用方法

たとえば、floatさせた要素の高さが回り込んでいる側よりも大きい場合や、ボックス内の最後の要素にfloatを指定した場合などでは、floatさせた要素がそれを含むボックスからはみ出てしまう。
これはCSS2の仕様なので、どのブラウザで表示させても基本的にはこのように表示されてしまう。
そこで、floatさせた要素も含む全体を枠線で囲みたい場合や、背景を表示させたい場合にこの「clearfixハック」を指定する。

CSSソース

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

.clearfix {
　display:inline-table;
}

/* Hides from IE5-mac \*/

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

/* End hide from IE5-mac */ 

IE7に対応させたいなら、

.clearfix {
　display:inline-block;
}

↑のように、「display:inline-table;」を「display:inline-block;」に変更するとIE7にも対応します。
clearfixハックを使わなくてもボックス内の最後に空要素を追加して、その要素に「clear:both」を指定すればいいんですが、コレのためだけに、空要素を作るのは避けたいところ。
そんなときはこのハックを使いましょう。

詳しくは、コチラへ。（英語サイト）

CSSソース

* html .sample {
　width:500px;
　height:150px;
　margin:10px;
}

使用したいセレクタの前に「* html」をつけるだけ。
CSS Validatorには正しいと通るみたいです。
ちなみに、IE7には対応していないので注意してください。

詳しくは、コチラへ。（英語サイト）

CSSソース

*:first-child+html .sample {
　width:500px;
　height:150px;
　margin:10px;
}

使用したいセレクタの前に「*:first-child+html」をつけるだけ。
他のモダンブラウザ用を記述した後に、IE7用を記述すればいいと思います。

CSSソース

Mac版IE5のみにスタイルを適用

/*\*//*/
.sample { width:500px; }
/**/

Mac版IE5のみスタイルを除外

/*\*/
.sample { width:500px; }
/**/

これもCSS Validatorには通るみたいです。
まー、Mac版IEはすでにサポートを打ち切っているのでこのハックも使う機会がない気がする･･･。
ってか、なくなってほしいですね。

CSSソース

.sample {
　width:500px;
　height:150px;
  _height:130px;
　margin:10px;
  _margin:15px;
}

↑の感じで使います。Win版IE 4～6のみ、「height:130pxとmargin:15px」が適用され、他のブラウザには「height:150pxとmargin:10px」が適用されます。
CSSの書式では正しくないので、CSS Validatorに通るやり方でやるなら、

/* Hides from IE5-mac \*/

* html .sample {
　width:500px;
  height:130px;
  margin:15px;
}

/* End hide from IE5-mac */ 

という感じで、スターハックとHollyハックを使えばいいと思います。