VERSION510 - sky-cloud pictures

IE6まで

バージョン6以下のIEにのみ適用される「スターハック」

* html セレクタ {プロパティ:値;}

Mac版 IE5のみを除外する「ホーリーハック（バックスラッシュハック）」

/* Hides form IE5-mac \*/
セレクタ {プロパティ:値;}
/* End hide from IE5-mac */

これらを使い、フロートした時におかしな余白ができてしまう現象を解決するために、目的のセレクタに「height:1%;」を指定してあげます。Mac版 IE5以外のバージョン6以下のIEにのみ適用させるわけです。

/* Hides form IE5-mac \*/
* html セレクタ {height:1%;}
/* End hide from IE5-mac */

この複合技を「ホーリーハック」と呼んでいるところもあるみたいで、正式な呼び方はちょっとわかりません。このハックについて詳しく解説されている記事を紹介します。

• WinIEのfloatのバグを回避する (The Holly Hack) by はにわプロトコル様

これでIE6で崩れるフロート系のバグがなんとなく解決したりします。ｦｲ
例えば、Peek-a-boo バグと呼ばれるバグはこれで解決します。しかし、これはIE7では修正されたとあったのですが・・・

IE7の出現

IE7では、6とはちょっと違った表示ながらも、相変わらず変な余白ができてしまうバグがありました＿|￣|○　しかもIE7はスターハックが無視されるんです。

そこで、Lucky bag::blogさまで紹介されていた「IE7 を含むモダンブラウザ向けの CSS ハックまとめ」という記事から、（小粋空間さまの「IE7 の CSS ハック」という記事よりハックの記述方法を変更しました。）

バージョン7のIEにのみ適用されるハック

*+html セレクタ {プロパティ:値;}
*:first-child+html セレクタ {プロパティ:値;}

/dd>

これをを上記のものに足してあげて、Mac版 IE5以外のバージョン7を含むすべてのIEにのみ適用します。

/* Hides form IE5-mac \*/
*:first-child+html セレクタ {height:1%;}
* html セレクタ {height:1%;}
/* End hide from IE5-mac */

セレクタをコンマで並べて記述すると、IE7では2つ目のセレクタを無視するためかうまくいかず、それぞれheight:1%;を指定するとうまくいきました。

もしheight:1%;のハックを施していたら、上記のようにIE7対策をした方がいいですね。