IE7CSS問題のまとめと対策


はてなブックマークで知ったんですが、Internet Explorer7のCSS問題がまた注目を浴びてるんですね。
はてなブックマーク » 過去の人気エントリー 2006年05月23日
Internet Explorer 7ベータ2の不具合からWebデザイン業界の混乱が見えてきた

このブログでも以前に、Internet Explorer 7で使えなくなるCSSハックでIE7のCSS実装について取り上げましたが、頭の整理のためIE7を取り巻くCSS問題と処方箋についてまとめてみました。

原因

Internet Explorer6:CSS実装にバグあり+未対応多数。Quirks modeとか。
Modern Blowser(FireFoxとかSafariとか):標準的なCSS実装。Standard mode。
→ウェブ製作者:IEだけが解釈するようにCSSハック導入


MS:IE7は標準的なCSSを実装するよ+ハックは効かなくなるよ(´∀`)


IEハックを放置すると→IE7で見ると表示大崩壊ヽ(;´Д`)ノ
IEハックを削除すると→IE6以前で表示大崩壊ヽ(´Д`;)ノ

処方箋(対策)

  1. IE7なんて消えて無くなれ派→ハックそのまま
  2. IE6以前切捨て派→ハック削除。さっさとインストールしろ
  3. 八方美人→IE7でもIE6でもモダンブラウザでも問題ないように書き換える。
    • 条件付コメント(Conditional Commentsを使う)*1
    • IE7ハックを使う*2。但しIE8以降に問題を先延ばしするだけ。
    • デザインの制約があっても我慢我慢。

*1 条件付コメント(Conditional Comments)を使う

head内に、
<!--[if lt IE 7]>
<style>
...(CSS)...
</style>
<![endif]-->

とすることでIE7未満のブラウザだけが読み込むCSSを設定できる…らしい。IE7正式版が出たら試してみよう…。
参考:条件付コメント(Conditional Comments)実験ページ

2007-03-15追記:条件付コメントはMicrosoft IEチームも積極的には推奨していない手法であることが分かりました。くわしくはIE7対策:条件付コメントは使ってはいけないを参照してください。

*2 IE7ハックを使う

以下のハックを使うことで、特定のバージョンに対してCSSを適用できる。…が将来困るかも。

参考:Easy CSS hacks for IE7 – Nano See, Nano Do
IE 6以下
* html {}
IE 7以下
*+html, * html {}
IE 7のみ
*+html {}
IE 7とモダンブラウザのみ
html>body {}
IE7以外のモダンブラウザのみ
html>/**/body

Nano See,Nano Doさんのサイトでも書いてあるように、モダンブラウザ向けCSS+条件付コメントでIE6未満向けCSSを記述…がいまのところベストなのかも。
MSがWindows UpdateとかでせめてIE6のCSSを直してくれれば済む話なのに…ぶつぶつ


“IE7CSS問題のまとめと対策” への4件のフィードバック

  1. サイト制作の仕事をしている為、大変参考になりました。
    ありがとうございました!
    なんでみんなIEなんか使うんだろう。。

  2. お役に立ててなによりです。
    月並みな答えですが、プリインストールであることが大きいのではないでしょうか。
    詳しくない人にとって、何もせずに最初から利用できる、ということはとても大きいと思います。

  3. たしかに。。
    でも、制作者から見れば、こんな欠陥だらけのブラウザのせいで日々仕事が増えるだけ。
    表示が崩れているのを発見したとき、IE6用のハックだとひらめきましたが、もうまとめてくださってるサイトを発見できてほんと助かった!ありがとうございました!

フォームは コメントしてほしそうに こちらを見ている……!

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください