毎度ご無沙汰しております。マークアップエンジニアの草野です。
2016年1月、Microsoftのサポートポリシーが変更され、各OSごとにインストールできる最新版のIEのみをサポートし、それ以前のバージョンはサポート外となりました。
これによって実質的にサポート対象がIE11のみとなったことで、これから新規で制作されるWebサイトについては原則としてIE11のみサポートとする動きが加速してくると思われます。
IEのサポートが11のみになると、これまで使えなかったCSS3の機能も他のモダンブラウザと足並み揃えて使っていくことが可能になり、「これでやっとIEの呪縛から開放される…！」と喜んでいる方も多いかもしれません。
しかし、CSS3が自由に使えるようになったことに油断して「ある対策」を取っておかなかったとしたら、ある日突然「うちのIE11で表示が滅茶苦茶なんだけど!?」というクレームが舞い込んでくるかもしれません。。。
ちゃんと作って確認もしたはずなのに…!?
- ・HTML5/CSS3を使っている
- ・ChromeやFirefoxなどIE以外のブラウザは問題ない
- ・クライアントのIE11では表示が激しく崩れている
- ・同じIE11でもマシンによって激しく崩れるものと崩れないものがある
事前に何度も動作チェックして、問題ないことを確認したはずなのに、
どういうわけだかクライアントの環境ではとんでもなく表示が崩れており、
大変なお叱りを受ける……
こんなことが制作現場では実際に起きています。
原因が思い当たりますか……？
- ・クライアントのブラウザのJSがオフになっている…？
- ・CSSの読み込みが阻害されている…？
- ・アンチウィルスソフト等が悪さしている…？
- ・クライアントのマシンに特殊な設定が施されている…？
いいえ、違います。
このような場合、その原因は十中八九IEの「互換表示」がオンになっていることが原因であると思われます。
IEの「互換表示」。これは、Web制作者側から見ると最後に残ったIEの罠です。
互換表示とは
IEの互換表示機能は、古いIE向けに制作されたWebページの表示が崩れる場合に、レンダリング方法を古いIEと同じ状態に変更することで表示崩れを直すための機能です。
互換表示をオンにすると、具体的にはIE7相当のレンダリング能力でWebページの表示を行うことになります。
たとえ最新のIE11を利用していようと、ひとたび互換表示をオンにしてしまうと表示能力はIE7と同じです。当然、HTML5やCSS3は認識できません。結果、表示が大きく崩れてしまうことになるのです。
互換表示がオンになる方法は大きく３通りあります。
- 1. アドレスバー横の互換表示ボタンを手動でオンにした場合
- 2. ブラウザの設定でWebサイト単位で設定されている場合
- 3. Microsoft側のデータベースに互換表示が必要なサイトだと認識されているドメインの場合
1.は閲覧している人が自分の意志で互換表示にしている状態なので、それで表示が崩れても閲覧する側の自己責任です。しかし、2や3の場合、閲覧している本人の知らないところで「互換表示」の設定がなされてしまっていることになりますので、適切に対処しないとトラブルの原因となります。
互換表示を回避する方法
Web標準に準拠して正しく作られているWebサイトの場合、普通は互換表示で閲覧されると逆に表示がおかしくなってしまいます。
従って、このようなトラブルを未然に防ぎたければ、制作者側で互換表示を回避するための対策を施しておく必要があります。
対策方法はいたって簡単です。
HTML文書のhead部分に、以下のメタタグを1行追加するだけです。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
これだけ。
X-UA-Compatibleの指定はその他互換表示設定よりも優先されますので、
ここでIE=edgeとしておけば、互換表示での閲覧を防止することができます。
簡単ですね。
たった一行追加するだけですので、これまで特にクレームを受けたことはないという方も
念のため入れておくことをお勧めします！
