TechNote

事務屋のおぼえがき

今さらながらieでX-UA-Compatibleが有効にならない場合の対処方法

いまだに社内LAN環境のブラウザはie8、ブラウザのバージョンアップは基幹システム(ミッションクリティカルなシステム)側の挙動に影響するためしてはいけないという環境で、内製システムを作っている。
当初はie8だけだったので、逆に割り切ってie8向けだけにコードを書いていたら済むという話であったが、もう一つ別の社内ネットワークからも見れるような運用変更の必要が生じたため、VLANの設定変更と共にie8とie9とie10が混在する環境に変わった。

そんな環境でも内製システムに関してはX-UA-Compatibleでコントロールできていたが、WordPressを利用した検索システムのie互換表示に悩まされたのでメモを残す。

f:id:kojikoji75:20151030200410j:plain

1.内製システムではX-UA-Compatibleが効く
2.WordPressを用いた検索システムではX-UA-Compatibleが効かない?
3.解決方法



1.内製システムではX-UA-Compatibleが効く

互換表示が何かという話はここでは割愛。この辺を参照。detail.chiebukuro.yahoo.co.jp


互換表示ボタンを押された場合、そのページは以降互換モードになってしまいもう一度そのボタンを押さない限り戻らない。ユーザが間違って押したら以降ずっと崩れた画面のままという、開発者側としたは気持ちの悪い状態。これは、ボタンを表示しないほうがいいに決まってる。
そして、当然これまで作っている内製システムはie8向けを前提としているので、ie8を基準とすべき。

以上の前提より、下記のコードを全ての内製システムのhead内に盛り込んだ。

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

これで内製システムはどのブラウザから表示させてもie8でレンダリングされ、崩れることはなかった(ie8,ie9,ie10)。

記述を入れる前
f:id:kojikoji75:20151030194741p:plain


記述を入れた後
f:id:kojikoji75:20151030200647p:plain


2.WordPressを用いた検索システムではX-UA-Compatibleが効かない?

ところがWordPress

X-UA-Compatibleを「書くところはここしかない!」というところにコードを書いても、一向に互換表示ボタンが消えてくれない。外部のファイルの読み込み(css,js)が記述されている箇所より前にきちんと記述はしている。テーマフォルダ内のheader.phpのhead内のアタマに書いて、周囲で影響しそうなコードがないか見渡すが、それらしきものは見当たらない。

WordPressなんで何か自分の知らないものが影響しているんだろう。時間もないし、面倒なので調査をやめる。


3.解決方法

該当システムのhtaccessに下記のように書くことで解決に至った。

Header set X-UA-Compatible "IE=8"

急いでいるので強引ではあるが使えるものは何でも使う。こういう姿勢もときには大事。

あわせて読みたい

kojikoji75.hatenablog.com
kojikoji75.hatenablog.com
kojikoji75.hatenablog.com


Web業界 発注制作の教科書 Textbook for order production Web industry

Web業界 発注制作の教科書 Textbook for order production Web industry

  • 作者: 高本徹,藤井総
  • 出版社/メーカー: レクシスネクシス・ジャパン
  • 発売日: 2015/08/11
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る
SEO対策のための Webライティング実践講座

SEO対策のための Webライティング実践講座

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック