IE8互換表示にかなりヤラれた件とその解決方法（なんでドキュメントモード指定してるのに反映されないんだろう？）

IE

結論*1


　metaタグでページ毎にドキュメントモードを設定したい場合、
　　<meta http-equiv="X-UA-Compatible" content="IE=8" />
　はheadタグの直後に書け。


　The page could not be displayed - Microsoft Windows
　IE8 の互換表示について - Windows 開発統括部 Blog - Site Home - MSDN Blogs
　

事件は会議室で起きてるんじゃない、ブラウザで起きてるんだ！

　先日、社内イントラネットサイトが完成したんです。
　

私「テストとか、よろしくお願いします！」（本当は「ご確認お願い致します」と言っています）

　

先輩「ちょっとちょっとぉ。なんか表が一行しかないのに縦のスクロールバーがでててウザいんだけどー。」（本当は「なんでこうなってるのかな？どう？」とかいう優しい感じでした）


　私「えぇっそんなはずは…。」


　見ると、tableタグで切ってある受注一覧表（かなり横長なのでdivでピッタリ囲んで横スクロールが出るようにしています）の部分に、縦スクロールが出ちゃってます。divがtableの縦幅しか計算に入れていないため、横スクロール分だけ縦に長くなってしまっていて、そのせいで縦スクロールが表示されているようでした。
　先輩のブラウザが古いのかな？でもでも、社内PCは基本的にすべてIE8で、サーバから一斉にアップデート配信されているはずです。みんなIE8なはずなんです（私はFirefoxだけど）。
　先輩のブラウザもIE8でした。
　

　私の環境で（IE8で）再現しようといじいじしている間に、
　「会議いってきまーす」
　と、PCをログオフして席を立って行ってしまった先輩。

　
　
　えぇっ先輩、事件は会議室じゃなくて先輩のブラウザで起きてるんですよぉ！先輩のPCも見せてくださいよぅ！！


そのとき、先輩プログラマにそっと囁かれました。
「それはね、IEを五感で感じて解決すべき問題だよ」（本当は「互換表示じゃね？」です）


IE8互換表示とは

　詳しくはこちらをご覧ください。


　Internet Explorer 8正式版レビュー − ＠IT
　IE8互換モードについて - Japan IE Support Team Blog - Site Home - TechNet Blogs
　How IE8 Determines Document Mode - IEBlog - Site Home - MSDN Blogs


　要するに、IE8で互換表示が設定されている場合には、そのドキュメントモードでレンダリングされて表示されますよ、ということのようです。
　このドキュメントモードを指定する方法は、開発者側からは

  • DOCTYPE宣言で指定する
  • metaタグで指定する
  • web.configなどのHTTPレスポンスヘッダーで指定する
  • IISから指定する
  • イントラのグループポリシーで設定する

といった方法があります。

　一方、ユーザ側で指定するには、ブラウザのアドレスバーの横にあるボタンをクリックするか、ツール→互換表示設定から設定します。

　互換表示の指定が反映される優先順位は、
　META タグ > HTTP レスポンス ヘッダー > DOCTYPE 宣言
　の順で、もしも、META タグや HTTP レスポンスヘッダーに IE=EmulateIE8 または、IE=EmulateIE7 が指定されている場合には、DOCTYPE 宣言が優先されるそうです。


調べたらほとんどのブラウザが事件でした

　よく見渡しますと、社内のほとんどのブラウザで、同様の事件が発生していました。なぜ、何も指定していないにも関わらず、IE8互換モード（つまりIE7モード）で表示されてしまっているのでしょうか。
　その答えは、この一点にありました。社内イントラネットサイトであった、ということです。
　IE8はデフォルトで、”互換表示でイントラネットサイトを表示する”にチェックが入っているようなのです。


刑事は立ち上がったが、もう全然わからない

　それじゃ、最も簡単で強力な、metaタグで解決しよう！と立ち上がった私。でも、いくら書いても解決しない。web.configはよくわかんないから(ASP.NETで開発しております）いじりたくないし…。もうやだ…なんで？
　　　　　


まぁ、解決できました


　結論は、最初に述べたとおりです。

以下のサンプル コードに、ページ単位でこの Internet Explorer 7 互換モード タグを使用する方法を示します。

  1. <html>
  2. <head>
  3. <!-- Use IE7 mode -->
  4. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  5. <title>My Web Page
  6. </head>
  7. <body>
  8. <p>Content goes here.

  9. </body>
  10. </html>

重要: 互換性メタ タグが正しく使用されるようにするには、 タグの直後、および他のすべてのメタデータの直前に互換性メタ タグを配置することをお勧めします。互換性メタ タグを正しく配置しないと、Internet Explorer 8 でその値が無視され、引き続き Internet Explorer 8 標準モードでレンダリングされる場合があります。

　えぇ〜。そこ。ふつう何かを追加するときって、既にあるタグの最後に追加しますよね？cssとかjavascriptとかのリンクの後に。
　書き直したら、無事、IE=8 モードで表示されました。

*1:今日はこっちが書きたくなってしまいました。SQLチューニング連載は明日以降に書きます。