はてなブックマークで知ったんですが、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以前で表示大崩壊ヽ(´Д`;)ノ
処方箋(対策)
- IE7なんて消えて無くなれ派→ハックそのまま
- IE6以前切捨て派→ハック削除。さっさとインストールしろ
- 八方美人→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件のフィードバック
サイト制作の仕事をしている為、大変参考になりました。
ありがとうございました!
なんでみんなIEなんか使うんだろう。。
お役に立ててなによりです。
月並みな答えですが、プリインストールであることが大きいのではないでしょうか。
詳しくない人にとって、何もせずに最初から利用できる、ということはとても大きいと思います。
たしかに。。
でも、制作者から見れば、こんな欠陥だらけのブラウザのせいで日々仕事が増えるだけ。
表示が崩れているのを発見したとき、IE6用のハックだとひらめきましたが、もうまとめてくださってるサイトを発見できてほんと助かった!ありがとうございました!
And I thought I was the ssnebile one. Thanks for setting me straight.