先日、クライアントから「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ファイルよりも前に記述するようにしましょう。
この方法は互換表示を使えなくするため、ユーザビリティ的には決してよくありません。表示が正しくされない場合の解決策の一つとして、検討してみるといいと思います。
