05Nov2006

IE 7 のCSSハック

Article entry published at 1:16 | 0 | 0

小粋空間さんの記事にて、IE7のみに適用されるハックが更新されたようです。ご注意ください。

各ブラウザのCSSの解釈の違い（バグ）を補正するために、そのCSSのバグを逆手にとって、特定のブラウザに意図したデザインを表示させる裏技(?)である、俗にいう「CSSハック。」

そんなCSSハックは、CSSの記述としては正しくないものもあるため、あまり使わないほうがよいというのが一般的です。（どこまでをCSSハックというのか判断しにくいですが・・・）

しかし最もシェアが高く最もバグが多いブラウザが、ご存知Internet Fucking Explorer。使いたくないと言いつつもCSSハックの利用が必須とならざるを得ないという、皮肉な現状があります。

仕事で利用する機会も多いことので、備忘録としてまとめてみました。

BLOG × WORLD ENDINGさんの記事では、このCSSハックがきれいにまとめられています。

この、CSSバグの宝庫、「真のWEBのお荷物」ことInternet Fucking Explorer 6のメジャーアップデート版、IE7の日本版が先日リリースされ、バグがどこまで修正されたのか、Webクリエイターたちは戦々恐々です。

僕もIE7をインストールしていじってみたんですが、早速IE6とも違うバグがあったので、この解決法を続きにちょこっと紹介してみます。

IE6まで

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

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

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

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

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

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

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

これをを上記のものに足してあげて、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対策をした方がいいですね。