IE8の互換モードをコントロール

IE8で漢字だけ文字化けた

フォントのセットアップがヘンテコな、英語WindowsXP&IE8の環境で謎な不具合に遭遇したのでメモ。

症状
漢字だけ細長い長方形に文字化けして表示される
ページの状態
CSSのfont-familyでゴシック系以外に、明朝系が明示的に指定されていないページ
閲覧環境の状態
ゴシック系の日本語フォントが存在せず、明朝系フォントのみ入っている、英語WindowsXP&IE8の環境

font-familyで指定されているゴシック系の日本語フォントが見つからない場合に、日本語の代替フォントとして明朝系が勝手にロードされているのだろうと推測。そのときに変にロードされているのか、レンダリング周りでバグってるのか、何らかの理由で文字が化けてしまう。

この現象が、IE8が持っている、IE7互換モードやQuirks互換モードだと、問題ないという不思議。同じ環境からAppleのサイトを見たら、勝手にIE7互換モードで動作していたので、真似してIE7互換モードでの表示指定にトライ。

HTMLからmetaタグで指定

<meta http-equiv="X-UA-Compatible" content="IE=7" />

お手軽な対処方法。ただし、修正対象ファイルが多いとやや面倒。そこで次の手段。

htaccessでレスポンスヘッダーを追加して指定

Header append-UA-Compatible: IE=7

htaccessでサイト全体にレスポンスヘッダーを追加して、IE7互換モードで動作させる。

参考:Internet Explorer 8正式版レビュー − @IT

互換モードのコントロールには、上記のページを参考にさせてもらいました。

問題の環境で、AppleのサイトがIE7互換モードで表示されていたのは、IE8の開発者ツール => コンソールから、document.documentModeプロパティを参照して確認しています。

さすがIE。謎多し。