たった1行で「IEの互換表示」を強制的に標準モードにする方法

先日、クライアントから「IE10でボタンが見えないパソコンがある」と問い合わせがありました。画像を背景で置換していたのでcss絡みかと思ったのですが、調べてみたところ原因はIEの互換表示でした。

互換表示とは、バージョンごとに異なるレンダリングを過去のモードで表示するIEの機能。IEの環境だけ表示やレイアウトが崩れる場合、互換表示が原因になっている可能性があります。

今回はIEの互換表示モードを強制的に標準表示にする方法を紹介します。

IEの互換表示を強制的に標準モードにする方法

headにmetaタグを1行加えるだけで実装できます。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

「chrome=1」はGoogle Chrome Frameを使用して表示するという意味。「content=”IE=edge”」はGoogle Chrome Frameがインストールされていない場合、IEの最新バージョンのレンダリングエンジンを利用するという記述です。

Google Chrome Frameとは、IEでGoogle Chrome相当のレンダリングエンジンを利用可能にするIEのプラグインのことです。

また「content」の記述は変更することができます。

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

例えば、このように記述すればIE8のレンダリングモードで表示することができます。

注意点として、上記のタグはcssやjsファイルよりも前に記述するようにしましょう。

この方法は互換表示を使えなくするため、ユーザビリティ的には決してよくありません。表示が正しくされない場合の解決策の一つとして、検討してみるといいと思います。