IE8の互換モード

職場のイントラネットのページレイアウトをCSSで作っていたら、どうも思ったように動作しない。

職場のページなので、ユーザは職場の人。うちの職場もしばらく前にようやく IE6 から IE8 に切り替わった(OS はまだ Windows XP だけれども)ので、CSS によるレイアウトがずいぶん楽になった。

ところが、Firefox 7 の表示結果と若干異なる。最初は 8 とはいえ、所詮 IE だから仕方がないか、とも思っていたのだが、:before { content: “text”; } のようなものも動作しない。しかも、ページによっては正常に動作するという不可解な挙動がみられた。

どういうことかというと、IE8 には IE7 などに対応する「互換モード」というのがあるのだが、イントラネットのページでは、「互換モード」がデフォルトになっているのだ(ブラウザの設定で変更することはできる)。

つまり、html ページの置かれている場所がイントラネットとみなされるかどうか、で挙動が変わってしまう、ということだ。

旧来のページを継続して使う、というケースではこのふるまいは確かにありがたいが、新規にページを作る際には邪魔な設定だ。

ユーザは自分だけではないので、ブラウザの方の設定を変えるわけにもいかない。どうすればいいのか調べてみたところ、
HTTP ヘッダか meta タグで、”X-UA-Compatible” に “IE=egde” を指定すれば良いということだった。HTTP ヘッダによる方法だとサイト全体、meta タグによる方法だとページ単位での
指定に向いている。

今回は、確かに古いページも多いので、ページごとに指定する方法を選ぶことにした。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
(略)
参考