調査を頼まれたことで、初めて体験するケースにでくわしました。
細かい話ですが、久々、ハマったので備忘を兼ねて書いておきます。
実際におきた現象はこんな感じ
対象は普通の静的HTMLのシンプルなページです。
イメージとしては、こんな感じ。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"></meta> <meta name="viewport" content="width=device-width"></meta> <link rel="stylesheet" href="css/my-styles.css"></link> <title>タイトル</title> <meta name="description" content="ここに機能の説明を書く"></meta> </head> <body> <div class="out-f"> <div class="inside-f"> <div id="top" class="box"> <img src="images/back_s.jpg" alt="画像" /> </div> <br /> <div class="line"> <h2>テキスト</h2> </div> </div> </div> </body> </html>
まあ、実際にはCSSで多少凝ったことはしていて、見出しにする文字に下線を引いたり、背景色を薄い青にしたりとかはやってますが、なんの変哲もないとしか言いようがないものです。
これを直接ではなく、<iframe>内に表示する。
ただ、それだけのものです。
WEBサーバーはLinuxにNginxで、ほぼデフォルトのままと聞いてます。
問題のおきる余地もなさげなのですが・・。
実際には、IE（Internet Explorer）11 で表示させたら、色も罫線もつくのに、Chromeで表示させると、背景も真っ白になって、レイアウトもぐちゃぐちゃになるというのですね。
見せてもらいましたが、たしかにそうなっていて、念の為にデベロッパーツールで見てみると「Chromeで表示させた時には、CSS自体が読み込まれていない」状態になっていました。
問題の直接原因はHTMLファイルの文字コード
調査の過程は書きません。
なにか、CSSかHTMLの文法に問題があるかと、ソースをおっかけただけなので。
で結論からいうと、文法には何の問題もありませんでした。
原因はHTMLファイルの文字コードでした。
誰かが保存するときに間違えたか、一括コンバート時に間違えたのでしょう。
エディタ等でみれば、まったくおかしなところはありません。
でも、ダンプで見れば一目瞭然です。
こちらが正しく表示できる方です。
つまり、うまくいかない方は、UTF-16で保存されていた・・という落ちです。
なので、ファイルをUTF-8で保存しなおしたら、とりあえずIEとChromeでほぼ同じ表示ができるようになりました。
わかってしまえば、なんてことはありません。
でも、HTMLがUTF-16で保存されていると、IE（Internet Explorer）だと普通に処理されるが、ChromeだとCSSすら読み込まれず（CSSがUTF-8だからかもしれないですが）表示がむちゃくちゃになる・・というのは、知りませんでした。
いろいろありますね。
ついでにメモ帳の文字コード表現の件の愚痴
今回、調べてる途中で思い出したことがあるので、ついでに書いておきます。
メモ帳で名前をつけ保存するときの、この選択肢・・。
これが混乱のもとなんじゃないかと。
自分は文字コードにそれほど詳しいほうじゃないですが、一般常識として、unicodeって「文字集合」のことで、UTF-8は「unicodeの符号化形式」のことだということくらいは知ってます。
符号化形式には「utf-8」以外にも「utf-16」（utf-32ってのもあるらしい・・見たことはないですが）があるらしいですが、どちらもunicodeなんです。
実際に、メモ帳でunicodeを選択すると「UTF-16」の符号化形式で保存されます。
だから、選択肢は「UTF-16」「UTF-8」ということです。
だったら、そう書いてほしいです。
まあ、天下のマイクロソフトがやってることなので、unicodeと書いて、暗黙的にUTF-16を表すというのは間違いではないんでしょうけど、利用する側として、ちょっと混乱します。
まるで「おはぎ」と「粒あんのおはぎ」のどっちにしますか？って言われているみたいですもの。
え・・同じじゃないの？と思って、「おはぎ」を選ぶと、しれっと「こしあんのおはぎ」がでてくる・・みたいな。
その時に、「こしあんだったら、選ばなかったのに！」とごねても、この辺では「おはぎと言えばこしあんの事を言うんだ！」などと言われればグウの音もでない・・。
いや・・、何の話かわかんなくなってきた。
まあ、簡単なことなんだから、それくらいサラっと改善してほしいなと、都度、思うのですよね。