メモログ

⛰ 塵が積もって山とならないメモのログ 👄

IE7対応しているかどうかを確認するための3つのポイント

既存のウェブサイトのCSSについて、IE7対応しているかどうかを確認するためのポイントは大きく3つかなと思います。

  1. スターハック（* html）の記述があるかどうか
  2. プロパティハック（_property:value）の記述があるかどうか
  1. 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用のタグを埋め込んだりすることでより美しい修正方法もあると思います。下記にはその参考になるサイトを紹介しておきます。