IE に色々とクセのある挙動が多いのはよく知られていますが、作成したウェブページをネットではなくローカルでチェックしている時に謎すぎる挙動に遭遇したのでメモしておきます。ググると IE11 ではオンライン/オフライン問わず様々なケースで外部CSSが読まれなくなる症例があるようで、“キャッシュクリア”、“DOCTYPEを修正”、“互換性オプションを変更” などの対処法が見つかりましたが、いずれの方法も当方の問題の解決に至らず、理由不明なまま対処療法にて解決しましたので一応それも書いておきます。もし明確な理由と対処法をご存知の方がいらっしゃいましたら是非コメントいただけますと幸いです。

– 現象を発生させる手順 –

1. サーバーに上げてある構築済みサイトの html をブラウザの保存操作で保存する。
   ※保存する時のブラウザは IE11 でなくても FF や Chrome でDLしても発生する
2. ローカルにある動作する構築済みサイトの該当 html をダウンロードしてきたものに置き換える。
3. すると何故か html 内で link タグ href で呼び出している CSS が読み込まれなくなる時がある。
   問題はIE11のみで FF や Chrome で開けば動作する。

– 問題の動作の詳細 –

この状態になると、問題が発生した html の内容を元々正しく動作していた html の内容からコピペして戻しても問題は解決しない。つまり html ファイルのパス表記など記述法の間違いではない。

例えば問題が起きている html をテキストエディタで開き中身を正しく動いていたものをコピペして置き換え保存する。元のファイルとバイナリコンペアで改行コード含めまったく同一のファイルであることを確認する。ファイルのパーミッション/属性フラグが一致していることも確認する。このようにしても、問題が発生した html ファイルを使う限り CSS は読みこまれない。ファイルをリネームしても駄目。ファイルを別ドライブに一旦移動して元に戻しても駄目。ディスクのクリーンナップ等キャッシュをクリアしても駄目。問題の html ファイルを削除して、元々動いてた html に置き換えると正しく CSS が読み込まれるようになる。

– 解決法 –

ファイルの内容や設定ではなく、『ブラウザ保存したファイル』自体に何らかの問題が発生しているのでこれを使う限り解決しない。問題のファイルを捨て、新規にファイルを作り直すか元々動いていたファイルに置き換えることで解決できる。問題のファイルを一時的に zip ファイルに入れそこから取り出せば実質ファイルを削除して作り直すのと同じになるので、問題を解決できる。