IE8互換表示にかなりヤラれた件とその解決方法（なんでドキュメントモード指定してるのに反映されないんだろう？）
結論*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 互換モード タグを使用する方法を示します。
- <html>
- <head>
- <!-- Use IE7 mode -->
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
- <title>My Web Page
- </head>
- <body>
- <p>Content goes here.
- </body>
- </html>
重要: 互換性メタ タグが正しく使用されるようにするには、
タグの直後、および他のすべてのメタデータの直前に互換性メタ タグを配置することをお勧めします。互換性メタ タグを正しく配置しないと、Internet Explorer 8 でその値が無視され、引き続き Internet Explorer 8 標準モードでレンダリングされる場合があります。
えぇ〜。そこ。ふつう何かを追加するときって、既にあるタグの最後に追加しますよね？cssとかjavascriptとかのリンクの後に。
書き直したら、無事、IE=8 モードで表示されました。
はてなダイヤリーデビューに際し、おこがましくも私が目標にしたいすごいはてなブロガーさん14傑
わたくし、昨日からはてなダイヤリー始めてます。
はてなブックマークを使い続けて約一年（はてブ開始日：2010/01/21）、ついにこの時が来てしまいました。始めてしまったら時間と脳みそと神経を確実に消費するだろうから、手を出さないでおこうと思ってたのに…。やっぱり書きたくなるものなのです。
直接誰かに接したりはしないネットの中にも、そういう空気は確実に漂っています。感じるんです。書きたくなるような雰囲気を。楽しそう。賢くなれそう。モテモテになりたい…。
昨日から、はてなダイヤリーを始めてます。
どうせやるなら目標を立てよう
どうせやるならば、目標を立てましょう。目標があるに越したことはありません。
考えた末、もしも、もしも読んでくださる方がいた場合に、伝わる文章であることを目標にしようと決めました。開発に関する話題を中心に、楽しく・読みやすく・きっと誰かの役に立つ、考え方や思想が伝わる文章を書いていきたいのです。
でも…、伝わる文章であることには、何が必要なんでしょうか。
どうやって目標を達成するのか
伸びる子は、よく真似をすると言います。
そこで突然ですが、私がすごいと思う（あるいは単に好きな）ブロガーさん14傑（はてなダイヤリー限定）を以下に列挙し、目標にさせていただくことにしました！まずは諸先輩方の良いところをどんどん真似ていこうと。そうしていくうちに、自然と伝わる文章を書く力が身に着くんじゃないかと想像したからです。
私は開発に関する話題を中心に書いていこうと思うので、
- 技術系ブロガー ６傑
- 私記系（または批評系あるいは吐露系）ブロガー ８傑
を独断と偏見に基づいて挙げさせていただきます。
おこがましくも私が目標にしたい、すごいはてなブロガーさん14傑
技術系 ６傑 *1
- kagigotonetさん [ブログ名] TechTalkManiacs http://d.hatena.ne.jp/kagigotonet/
イマドキ技術の分析にしても、ウェブサービスの紹介にしても、開発技術のTipsにしても、単に内容解説やプログラムを書くだけでなく、「なぜ」を教えてくれるところがスゴイ！なぜあのサービスはこんな挙動なのか、どうやって動いてるのか、なぜそんなロジックでプログラムを組むのか…等々。そして丁寧。
- oogattaさん [ブログ名]oogattaの勉強日記 http://d.hatena.ne.jp/oogatta/
翻訳記事の掲載など。丁寧な解説付きで、読みやすくて。これこそ、役に立つ、という感じ。私には理解不可能な、高度な話題の時が多いですが、がんばってついていけたらと。
- glass-_-onionさん [ブログ名]A Day In The Life http://d.hatena.ne.jp/glass-_-onion/
- KAZUMiXさん [ブログ名]KAZUMiX memo http://d.hatena.ne.jp/KAZUMiX/
彼の作るJavascriptのファンなので、ここに尊敬の念を込めて追加。
- marutanmさん [ブログ名]Meltdown Countdown http://d.hatena.ne.jp/marutanm/
技術寄りの記事なのに、稀にみる面白さ。楽しい！そしてトレンドな雰囲気を知ることができるのが嬉しいです。
- amachangさん [ブログ名]IT戦記 http://d.hatena.ne.jp/amachang/
有名人な人気者、amachangさんのブログ。時々掲載されるJavascript関連の記事が、親切で優しい。初心者の私は、プログラミングって暗い世界じゃないんだって安心させてもらった。そりゃそうですよね。
私記系（または批評系あるいは吐露系）８傑
- merecoさん [ブログ名]メレンゲが腐るほど恋したい http://d.hatena.ne.jp/mereco/
綺麗で楽しくて個性的な写真がいっぱいの、旅行記ブログ。痛快で迷走な旅日記…っていうかファンです！！（告白！）
- heiminさん [ブログ名]平民新聞 http://d.hatena.ne.jp/heimin/
言わずと知れた有名ブログ。好きだから、好きだからこそ、その写真たちに意味を求めてしまう私を許していただきたい。
- Ryu-Higaさん [ブログ名]読谷の飛行場に想う。 http://d.hatena.ne.jp/Ryu-Higa/
なんだかいつも、たくさんの人に出会って、何かを吸収して、それをわかりやすく熱く綴ってらっしゃる。まぶしい！
- tek_kocさん [ブログ名]遥か彼方の彼方から http://d.hatena.ne.jp/tek_koc/
個人的に雰囲気が好きなので読ませていただいているブログ。ブロガーさんの個人的な内容なのにとても読みやすくて、見習うべきところがたくさん。
- OQRさん [ブログ名]非童貞（オマエラ）の その上から目線が 気に食わない。 http://d.hatena.ne.jp/OQR/
むほわーっと書かれ、（凄惨な）主張があり、読まずにはいられない文章。かっこいい。
- kokoroshaさん [ブログ名]ココロ社 http://d.hatena.ne.jp/kokorosha/
サブタイトルに「ほのぼの四次元」とある通り（それに反して）、毎回掲示板が盛り上がっていらっしゃるブログ。アウトプットがたくさんで、いつも注目の的。
- gamellaさん [ブログ名]フューチャーインサイト http://d.hatena.ne.jp/gamella/
技術寄り・IT業界寄りのニュースやトレンドを、独自の視点で切り出すブログ。ポップなところが好きです。
- kawangoさん [ブログ名]はてなポイント３万を使い切るまで死なない日記 http://d.hatena.ne.jp/kawango/
こちらも、技術寄り・IT業界寄りのニュースやトレンドまたは独白が書かれたブログ。痛烈で鋭い一方、温かみのあるお人柄がうかがえて、魅力的。
ふむふむ。
ここまで読まれて、この子はなんて大それた目標を立てているんだと思われた方が多いかと思いますが、元来私はものぐさな性格でございまして、とてもとても達成できるとは思っておりません。ただ、短距離走は苦手ですが、長距離走ならなんとかついていけると自負しておりまして、達成するための努力だけはしていきたいと思っているところであります。この分進秒歩の時代に何を悠長なとお思いでしょうが、どうか長い目で、たまには五千円…じゃなかったご声援をいただけたら嬉しいなぁなどと夢を見ております。まぁそんなふうに更新していきますので新参者をどうぞよろしくぶった切ってください。
*1:集まったブログがJavaScript寄りな理由は、私が現在興味津々だからであります。
