小粋空間  -  a cheap joke and a play on words site

IE7 の CSS ハック

「IE7 で閲覧すると表示が異なるのですが」というご質問を頂いたので、CSS ハックを利用して、IE7 のスタイルのみを変更する方法を紹介します。結論だけ述べますと、IE7 に異なるスタイルを適用する（=他のブラウザと表示を合わせる）場合、該当のセレクタの前に

*:first-child+html

を付与します。例えば、IDセレクタ #banner に適用させる場合、

*:first-child+html #banner {
　　　　　　：
　　[IE7用のスタイルを記述]
　　　　　　：
}

となります。

なお、それ以外のブラウザのために、元の #banner の設定は、この追加したセレクタより前方に記述します（下記）。この順番を間違えると期待する表示にならないのでご注意ください。

#banner {
　　　　　　：
　　[IE7以外のスタイルを記述]
　　　　　　：
}
*:first-child+html #banner {
　　　　　　：
　　[IE7用のスタイルを記述]
　　　　　　：
}

以下で紹介する CSS ハックは、以前、Lucke bag::blog さんが CSS hacks から引用された記事（下記）から内容が変更されているようですので、下手な訳をつけて再掲しておきます。
IE7 およびモダンブラウザ、Opera9 に対応しています。

Lucky bag::blog：IE7 を含むモダンブラウザ向けの CSS ハックまとめ

以下、CSS hacks より抜粋・和訳

ほとんどのCSSハックはセレクタのバグを扱ったものです。以下は、ブラウザバージョンと、要素を選択するためのセレクタの開始部分を示したものです。これらのハックはブラウザのバグや欠けている機能を利用しているので、あまり知られていない、または将来登場するブラウザでは結果が異なるかもしれません。ご注意ください。
セレクタのすべては有効なCSSを使用します。

IE 6 and below （IE6以下）

* html {} 

IE 7 and below （IE7以下）

*:first-child+html {} * html {} 

IE 7 only （IE7のみ）

*:first-child+html {} 

IE 7 and modern browsers only （IE7 とモダンブラウザ）

html>body {} 

Modern browsers only (not IE 7) （IE7 以外のモダンブラウザ）

html>/**/body {} 

Recent Opera versions 9 and below （最近の Opera9 以下）

html:first-child {} 

「IE7 and below」のハックが、「IE6 and below」と「IE7 onle」の、2個の別々のセレクタであることに注意してください。両方のセレクタに、必要とするセレクタの残りを加えなければなりません。また、「IE6 and below」がセレクタを正しく解析することができなくなるので、2つのセレクタをカンマで結合することはできません。

上のセレクタはhtml要素、または body要素を選択します。これは完全なセレクタの始まりとして使用されるべきです。

例えば、あなたが必要とするセレクタが

#foo .bar

であり、それをIE7だけに適用したいのであれば、セレクタは

*:first-child+html #foo .bar

になるでしょう。

以上です。
訳が間違ってましたらご指摘ください。適宜差し替えます。