8bitodyssey.com » ie7 http://8bitodyssey.com WordPressでつづる、おでのこの道わが旅。 Sat, 04 Feb 2012 02:26:13 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 IE7CSS問題のまとめと対策 http://8bitodyssey.com/archives/651 http://8bitodyssey.com/archives/651#comments Tue, 23 May 2006 14:59:36 +0000 おで http://8bitodyssey.com/archives/651

はてなブックマークで知ったんですが、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を直してくれれば済む話なのに…ぶつぶつ

© 2012 Odysseygate.com This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact odysseygate@gmail.com so we can take legal action immediately.

鼻からカフェモカ。

]]> http://8bitodyssey.com/archives/651/feed 10