IEの互換表示
IEの互換表示が勝手にIE5とかになって、ボタンが押せなくなるから何とかしてほしいとの要望をいただいたので、そのメモです。
IEには互換表示用のモードがあり、開発者としては結構便利なんですけど、エンドユーザさんが使う場合、このモードが想定外になってしまうと、正常にJavaScriptなどが動かくなったりするので結構面倒です。
また、このモード表示はIEの設定などに左右される為、なにも対処していなければ、各クライアントごとに違うモードで起動してしまいます。
詳しくはマイクロソフトのページで公開されているのでそちらを参照ください。
これをどの環境でも同一のモードで起動するためには、HTML内に互換モードを決定するための<meta>タグを組み込んだり、headerに属性を送り込んだりすることで解決するらしいです。
<対処法>
- プログラム上でレスポンスヘッダーにX-UA-Compatibleを追加する。
- X-UA-CompatibleをHTML内に指定する。
- WebサーバでレスポンスヘッダーにX-UA-Compatibleを追加する。
上から順に影響範囲は小さいのかな。
プログラム上でレスポンスヘッダーにX-UA-Compatibleを追加する
サーバ側のプログラムでヘッダーを設定できるなら、以下のようにする方法もありかなと思っています。
※以下は、JavaServletの場合
response.setHeader("X-UA-Compatible", "IE=11");
この場合は、Servlet単位(つまり、アクション単位)で設定ができるので、もっとも影響範囲は小さいですが、まぁ使うことはないでしょうね。
X-UA-CompatibleをHTML内に指定する
以下の<meta>をHTMLのheader内に記述するようにします。いろいろサイトをみていると<meta>を記述する場所が重要なようで、jsファイルなどの読み込み前や、文字コードの指定後に書くといいみたいです。
<meta http-equiv="x-ua-compatible" content="IE=Edge" > <meta http-equiv="x-ua-compatible" content="IE=EmulateIE11" >
この方法は、HTML内に記述するので、該当画面を表示する場合はすべてに影響があるますね。
※このEmulateIE11って必要なんだろうか・・・
WebサーバでレスポンスヘッダーにX-UA-Compatibleを追加する。
この方法の場合、そのWebサーバを経由している場合、すべて影響があるかと思われます。
以下はApacheの場合です。
LoadModule headers_module modules/mod_headers.so <IfModule headers_module> Header set X-UA-Compatible: IE=11 </IfModule>
モジュールがない場合は、別途準備しないといけないとかなんとか・・・
とりあえず、今回は、2番目の方法で解決しようと思ってます。
以上、メモでした。