このご時世にInternet Explorer 11のみ派手にデザインが崩れる事案が発生
新しく作成しているサイトをテストしようと思ったら派手に壊れていた
今どき、どんな HTML + CSS になってるんだよと思われるかも知れない
関係者の名誉のために一言添えるのであれば、本来は Internet Explorer 11 でも問題なく表示されている。それがテストを実施しようと思った途端に壊れていたという状況となった
という事で追跡調査を行った
見た感じの壊れ方は、まるで CSS がまともにあたっていない感じだった、それもあり下記の内容を順次確認した
1. 他のブラウザでの確認 ( Firefox, Chrome ) ⇒ 正常に表示されていた
2. キャッシュの確認。キャッシュを全てクリア後に再表示。 Fiddler を使い、全てのファイルがダウンロードされているのも確認。 ⇒ 全て正常にダウンロードされていた
3. デザインのHTML ( こちらは正しく表示されている )と、読み込まれている CSS を比較 ⇒ 全く同じ
4. CSS の読み込み順序を同じに変更 ⇒ 変化なし
5. 読み込まれている JavaScript を全て停止 ⇒ 変化なし
6. HTML のタグを確認 ⇒ 全く同じ構成
7. 実は見てるファイルが違うのかと思い HTML を修正 ⇒ 変更される
いよいよ意味が分からなくなって来た所で、元のデザインにあり、作成後に入れ忘れている一文を入れてみた
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
ここで初めてデザインに変化が訪れた
入れてみたと言っておいてなんだが、変化がないはずだった… はずなのに、あれ? 変わってる? となった
Internet Explorere 11 では条件付きコメントは使えないはず…
それ以前に lt なのだから IE 9 以下のブラウザとなるけど 11 だし…
なのになぜ適用された? と思いつつようやく犯人の姿が見えてきた
思いもよらない伏兵は、こんな所に配置されていた
F12 を押して Developer Tools を表示したままにしていたのに、全く気が付かなかった
なぜ header タグが正しく認識されていないんだろう… 程度だった
よくよくブラウザの部分をみたら、「7」になっている。つまり Internet Explorer 7 での表示になっている
試しに edge に変更したところ、正常に表示された…とても悲しい
そしてどうしてこうなった
F12 を押して Developer Tools を終了した所、デザインが崩れる。結局の所 Internet Explorer 7 での表示に戻ったらしい
結論から言えば、デフォルト表示で互換表示になる理由があるようだ
何の気なしに Internet Explorer の互換表示設定を確認してみた
凄く気になる一文、「表示イントラネットサイトを互換表示でする」
まさかと思いチェックを外してみた所、表示は正常に戻った
今回の現象は、Internet Explorer がアクセスした先はイントラネットだと解釈した事により、互換表示に切り替わってしまったという事になる
そして Internet Explorer のいうイントラネットサイトとは
見つかりました
http://support.microsoft.com/kb/884430/ja
注 : プロキシ構成が使用されない場合、Internet Explorer では、ホスト名にドット (.) が含まれない URL はローカル イントラネット ゾーンに割り当てられます。ドット (.) が含まれないホスト名は、ドットなし (ドットレス) ホスト名と呼ばれます。FQDN はインターネット ゾーンに割り当てられます。
だそうです
今回、名前ベースのバーチャルホストを使ってサイトを分けており、hostsに書いた名前にドット(.)は含まれていなかった。それが原因だったようだ
本番は IP Address で動かしていたので大丈夫だったらしい…
今日からhostsにサーバー名書く時は servername.vsie と名付ける事に決めた