アラカン"BOKU"のITな日常

文系システムエンジニアの”BOKU”が勉強したこと、経験したこと、日々思うことを書いてます。

IE(Internet Explorer)11で問題ないのに、Chrome(v65)でCSSが読み込まれない現象でハマった(備忘)

調査を頼まれたことで、初めて体験するケースにでくわしました。

 

細かい話ですが、久々、ハマったので備忘を兼ねて書いておきます。

 

実際におきた現象はこんな感じ

 

対象は普通の静的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で、ほぼデフォルトのままと聞いてます。

 

問題のおきる余地もなさげなのですが・・。

 

実際には、IEInternet Explorer)11 で表示させたら、色も罫線もつくのに、Chromeで表示させると、背景も真っ白になって、レイアウトもぐちゃぐちゃになるというのですね。

 

見せてもらいましたが、たしかにそうなっていて、念の為にデベロッパーツールで見てみると「Chromeで表示させた時には、CSS自体が読み込まれていない」状態になっていました。

 

問題の直接原因はHTMLファイルの文字コード

 

調査の過程は書きません。

 

なにか、CSSかHTMLの文法に問題があるかと、ソースをおっかけただけなので。

 

で結論からいうと、文法には何の問題もありませんでした。

 

原因はHTMLファイルの文字コードでした。

 

誰かが保存するときに間違えたか、一括コンバート時に間違えたのでしょう。

 

エディタ等でみれば、まったくおかしなところはありません。

f:id:arakan_no_boku:20180323222804j:plain

 

でも、ダンプで見れば一目瞭然です。

 

こちらがChromeCSSが読み込まれなかった方。

f:id:arakan_no_boku:20180323222832j:plain

 

こちらが正しく表示できる方です。

f:id:arakan_no_boku:20180323223325j:plain

 

つまり、うまくいかない方は、UTF-16で保存されていた・・という落ちです。

 

なので、ファイルをUTF-8で保存しなおしたら、とりあえずIEChromeでほぼ同じ表示ができるようになりました。

 

わかってしまえば、なんてことはありません。

 

でも、HTMLがUTF-16で保存されていると、IEInternet Explorer)だと普通に処理されるが、ChromeだとCSSすら読み込まれず(CSSUTF-8だからかもしれないですが)表示がむちゃくちゃになる・・というのは、知りませんでした。

 

いろいろありますね。

 

ついでにメモ帳の文字コード表現の件の愚痴

 

今回、調べてる途中で思い出したことがあるので、ついでに書いておきます。

 

メモ帳で名前をつけ保存するときの、この選択肢・・。

f:id:arakan_no_boku:20180323225117j:plain

 

これが混乱のもとなんじゃないかと。

 

自分は文字コードにそれほど詳しいほうじゃないですが、一般常識として、unicodeって「文字集合」のことで、UTF-8は「unicodeの符号化形式」のことだということくらいは知ってます。

 

符号化形式には「utf-8」以外にも「utf-16」(utf-32ってのもあるらしい・・見たことはないですが)があるらしいですが、どちらもunicodeなんです。

 

実際に、メモ帳でunicodeを選択すると「UTF-16」の符号化形式で保存されます。

 

だから、選択肢は「UTF-16」「UTF-8」ということです。

 

だったら、そう書いてほしいです。

 

まあ、天下のマイクロソフトがやってることなので、unicodeと書いて、暗黙的にUTF-16を表すというのは間違いではないんでしょうけど、利用する側として、ちょっと混乱します。

 

まるで「おはぎ」と「粒あんのおはぎ」のどっちにしますか?って言われているみたいですもの。

 

え・・同じじゃないの?と思って、「おはぎ」を選ぶと、しれっと「こしあんのおはぎ」がでてくる・・みたいな。

 

その時に、「こしあんだったら、選ばなかったのに!」とごねても、この辺では「おはぎと言えばこしあんの事を言うんだ!」などと言われればグウの音もでない・・。

 

いや・・、何の話かわかんなくなってきた。

 

まあ、簡単なことなんだから、それくらいサラっと改善してほしいなと、都度、思うのですよね。