職場のイントラネットのページレイアウトを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"> (略)
参考