既存のウェブサイトの CSS について、IE7 対応しているかどうかを確認するためのポイントは大きく 3 つかなと思います。
-
スターハック(* html)の記述があるかどうか
-
プロパティハック(_property:value)の記述があるかどうか
-
html>body の記述があるかどうか
これらの記述がなく、それでいて IE6 で十分きれいに表示できていれば、IE7 でも大体大丈夫だと思います。IE7 で確認する必要がないということではありませんが。
スターハック対応
スターハックで記述されている箇所は IE7 では無視されてしまいますが、その上の行に*+html で指定を追加すると問題なくなります。きれいな CSS とはいえませんけど、他のブラウザに影響を与えない方法としては有効です。
*+html body .class {height : 100px;} * html body .class {height : 100px;}
同じ指定を並記するなら、「+html, _ html」という形で記述した方がきれいなのですが、この形では IE6 でハックが有効に機能しないようです( html, _+html という順番では試してません)。
プロパティハック対応
プロパティハック(_property:value)もスターハックと同様に、IE7 では無効となります。スターハックの場合と同様に*+html で追加で指定することで対応することができます。_propaty:value を、「*property:value」という形に置き換えることで対応することも可能のようですが、実際に試したことがないのできちんと動作するかは分かりません。
body { width:100px; _width:120px; } * html body { width:120px; }
html>body 対応
html>body の指定は IE6 では対応していなかったのですが、IE7 では対応しています。そのため、*+html で記述を相殺させる必要があります。
html>body { background-image: url(src);} *+html body {background-image: none;}
より完璧な対応をほどこすための参考サイト
上記の対応方法は、時間をかけずに、かつ他のブラウザの影響を与えずに対応するための一例です。CSS ハックを工夫したり、HTML に IE 7 用のタグを埋め込んだりすることでより美しい修正方法もあると思います。下記にはその参考になるサイトを紹介しておきます。
- css filters (css hacks):CSS hack とブラウザ対応がマトリクスになっていて見やすい
- Blaze New Media:Targeting IE 7.0:IE7 だけに適用させる CSS hack と、html の head に IE7 用の CSS を記述する方法の紹介
- Lucky bag::blog:IE7 を含むモダンブラウザ向けの CSS ハックまとめ