IE8以上対応のページ作成で互換モードを予防する

2013年4月に、WindowsXPのサポート終了期限について公式アナウンスがでたこともあって
WEB屋さんの案件でも、IE8以上対応の案件も少しずつ増えてきました。
作る側の本音をいうと9以上のほうが個別対応が減ってコスト削減できるのですが
お客様としては、サポートが終わってもWindowsXPユーザが減るかどうかわからないので考慮したい背景があっての8だとか。

そんなわけで、喜んでIE7未対応で8から対応しているCSSを使用したページを作ったのですが
確認したパソコンのIE8が互換モードになっていて、意図した表示にならないケースが発生。
たしかに、コーディングの知識がない一般のInternetExplorerユーザは
アドレスバーの横にある紙が破けているアイコンが何なのかわからないわ。間違えて押す可能性もあるわ。

そこで、無用なトラブルを予防する工夫として
IEのレンダリングモードを標準準拠(つまりIE8なら8標準モード)にデフォルト設定するmetaタグを使ってみました。
これで、IE8のアドレスバーの横にある互換モードボタンも非表示になるので
互換モードで表示崩れになるトラブルも、いくらか予防できます。

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">

headの直後に入れるのがベストらしいです。

参考サイト:
IE8のレンダリングモードに関するまとめ

関連記事

Pocket