IE11だと普通に表示されて、Google Chromeではレイアウトが崩れた（CSSが読み込まれなかった）静的なHTMLページがあったときの調査結果と対処方法の備忘です。
目次
<iframe>内に表示するとレイアウトが崩れる問題
静的なHTMLのページを<iframe>内に表示すると、レイアウトが崩れる問題です。
サイトには100くらいのHTMLページがありますが、そのうちの５つくらいのページで問題が発生し、他のファイルはなんともありません。
しかも、問題が発生するHTMLページであっても、すべてのブラウザでそうなるわけではありません。
IE（Internet Explorer）11 で表示させたら、色も罫線もつきます。
つまり、正常に表示されます。
ところが、Chromeで表示させると、背景も真っ白になって、レイアウトもぐちゃぐちゃという、まったく、CSSの設定がきいてない感じになります。
念の為にデベロッパーツールで見てみると、やはり「Chromeで表示させた時には、CSS自体が読み込まれていない」状態になっていました。
これが調査依頼された現象です。
原因はHTMLファイルの文字コードでした
とりあえず、うまくいくHTMLとうまくいかないHTMLを調べました。
文法ミスなどはありません。
うまくいかない方をエディタ等でみても、まったくおかしなところはありません。
なので、今度はダンプでしらべてみました。
すると、原因がわかりました。
こちらが正しく表示できる方です。
うまくいかない方は、UTF-16で保存されていました。
うまくいくほうは、UTF-8で保存されていました。
なので、試しにファイルをUTF-8で保存しなおしたら、解決しました。
どうも。
HTMLがUTF-16で保存されていて、かつ、iframe内に表示する場合。
- IE（Internet Explorer）だと普通に処理される
- ChromeだとCSSが読み込まれず表示がむちゃくちゃになる
ということのようです。
なぜ、間違った文字コードで保存されてしまったのか
問題は保存する文字コードの問題でした。
でも、やっかいなのは、保存した本人もまったく意識していなかったことです。
ヒアリングをすると、どうも原因になったらしいのが、メモ帳で名前をつけ保存するときの、unicodeという選択肢です。
作業者は、「文字コードはSJSじゃなくてユニコードだからね・・」と言われて、unicodeで保存したぽいです。
しかも、ちょっとした修正だったので、メモ帳でやったとのこと。
なるほど・・です。
メモ帳でunicodeを選択すると「UTF-16」の符号化形式で保存されますからね。
指示した人間は、ユニコードといえばUTF-8に決まってる・・ということから、より詳しい指示をしていなかったようなのですが、普段から文字コードを意識していない人からすれば、「そんなんわかるわけない！」ということです。
そのへんを関係者に周知して、その件は終わりでしたが、個人的にはメモ帳の選択肢に「UTF-16」をのせるなら「unicode」なんて中途半端な書き方ではなく「UTF-16」って書いておいてほしいよな・・と思ったりしました。
もちろん、愚痴ですけど（笑）。
ではでは。