CSSハックを使おう

以前 IE7のCSS対応，バグ，修正情報 を紹介しましたが
その際 IE は多くの擬似クラス（:forcus），擬似要素（:after，:before）に対応していないことをご紹介しました。

もちろんこれらの擬似クラス，擬似要素は
IE 以外の多くのブラウザ（Firefox，Opera，Safari等）が対応しているので
使わない手はありません。

しかし、擬似クラス，擬似要素で対応していないものは IE では無視されます。
この場合、IE だけ他のCSSを適用させたいと思う人が多いと思います。

これをするには次のような方法があります。

1. 複数のCSSを用意しておき、ブラウザの毎に使うCSSを変える
2. CSSハックを使う

「1.」 はプログラムを使って自動的に使うCSSを振り分けることになるので
プログラムの知識がないとちょっと難しいです。

「2.」 はCSSに少し工夫を加えるだけなので比較的簡単にできます。

今回は、「2.」 を使ったCSSの振り分けの方法について書いていこうと思います。
（自分の備忘録ですが…orz）

次のような CSSハック がとても分かりやすく紹介されています。

• IE6以下のみ特定のCSSを適用
• IE6のみ特定のCSSを除外
• IE7のみ特定のCSSを適用
• IE7とモダンブラウザのみ特定のCSSを適用
• IE7を除くモダンブラウザに特定のCSSを適用
• safariのみ特定のCSSを適用
• XHTML側の指定
• clearfix（空divでのclear: bothの代用）

　　　→ CSSハック一覧（HTML│CSSタグ辞書）
　　　→ HTML│CSSタグ辞書 トップページ

私がよく使う CSSハック はこれです。

IE7 を 除くモダンブラウザ（Firefox, Safari, Opera等） に特定のCSSを適用（IE6にも適用されません）
セレクタの前に【html>/**/body 】をつけると、IE7を除いたモダンブラウザに適用される。

こちらのページでもさまざまな CSSハック が紹介されています。

　　→ 正式版完全対応! Internet Explorer 7 CSS攻略法 - CSSハック一覧（マイコミジャーナル様）

こちらでも高度な CSSハック が紹介されています。
紹介ページは日本語ですが
実際のCSSの解説のページは英語ですので英語分かる方にどうぞ！（私は英語できないです…）

　　　→よく使われているCSSハック12選（IDEA*IDEA様）

私の備忘録ですが皆さんのお役に立てれば幸いです。