今回は、メモ帳で作業して保存したHTML・CSSファイルが、IE11だと普通に表示されたのに、Google Chromeではレイアウトが崩れた（CSSが読み込まれなかった）という問題を調査対応したときの備忘録です。
対象は普通の静的HTMLページ
対象は普通の静的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で表示させると、背景も真っ白になって、レイアウトもぐちゃぐちゃになります。
まったく、CSSの設定がきいてない感じなので、念の為にデベロッパーツールで見てみると「Chromeで表示させた時には、CSS自体が読み込まれていない」状態になっていました。
問題の直接原因はHTMLファイルの文字コード
結局、CSSかHTMLの文法にには何の問題もなく、原因はHTMLファイルの文字コードでした。
誰かが保存するときに間違えたか、一括コンバート時に間違えたのでしょう。
エディタ等でみれば、まったくおかしなところはありません。
でも、ダンプで見れば一目瞭然です。
こちらが正しく表示できる方です。
つまり、うまくいかない方は、UTF-16で保存されていた・・という落ちです。
なので、ファイルをUTF-8で保存しなおしたら、解決しました。
わかってしまえば、なんてことはありません。
でも、HTMLがUTF-16で保存されていると、IE（Internet Explorer）だと普通に処理されるが、ChromeだとCSSすら読み込まれず（CSSがUTF-8だからかもしれないですが）表示がむちゃくちゃになる・・というのは、知りませんでした。
いろいろありますね。
ついでにメモ帳の文字コード表現の件の愚痴
今回、どうも原因になったらしいのが、メモ帳で名前をつけ保存するときの、unicodeという選択肢です。
作業したのは自分ではなくて、他の人だったので、また聞きですけども「文字コードはSJSじゃなくてユニコードだからね・・」と言われて、unicodeで保存したぽいです。
普段からコードを意識して作業している人間にとっては、ユニコードといえばUTF-8以外の選択肢はないだろうという暗黙の了解ですが・・。
unicodeって「文字集合」で、その符号化形式として「utf-8」以外にも「utf-16」「utf-32」なんてのがあるけれど、どれもunicodeなんだと、知らない人には通じません。
実際に、メモ帳でunicodeを選択すると「UTF-16」の符号化形式で保存されます。
だから、選択肢は「UTF-16」「UTF-8」ということです。
だったら、そう書いてほしいです。
愚痴ですけど。