"BOKU"のITな日常

BOKUが勉強したり、考えたことを頭の整理を兼ねてまとめてます。

UTF-16でHTMLを保存するとGoogle Chromeでiframe内表示すると正常表示されません

f:id:arakan_no_boku:20190301193447j:plain

IE11だと普通に表示されて、Google Chromeではレイアウトが崩れた(CSSが読み込まれなかった)静的なHTMLページがあったときの調査結果と対処方法の備忘です。

目次

 <iframe>内に表示するとレイアウトが崩れる問題

静的なHTMLのページを<iframe>内に表示すると、レイアウトが崩れる問題です。

サイトには100くらいのHTMLページがありますが、そのうちの5つくらいのページで問題が発生し、他のファイルはなんともありません。 

しかも、問題が発生するHTMLページであっても、すべてのブラウザでそうなるわけではありません。

IEInternet Explorer)11 で表示させたら、色も罫線もつきます。

つまり、正常に表示されます。

ところが、Chromeで表示させると、背景も真っ白になって、レイアウトもぐちゃぐちゃという、まったく、CSSの設定がきいてない感じになります。

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

これが調査依頼された現象です。

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

とりあえず、うまくいく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で保存されていました。 

なので、試しにファイルをUTF-8で保存しなおしたら、解決しました。 

どうも。

HTMLがUTF-16で保存されていて、かつ、iframe内に表示する場合。

ということのようです。

なぜ、間違った文字コードで保存されてしまったのか

問題は保存する文字コードの問題でした。

でも、やっかいなのは、保存した本人もまったく意識していなかったことです。

ヒアリングをすると、どうも原因になったらしいのが、メモ帳で名前をつけ保存するときの、unicodeという選択肢です。

f:id:arakan_no_boku:20180323225117j:plain

作業者は、「文字コードはSJSじゃなくてユニコードだからね・・」と言われて、unicodeで保存したぽいです。

しかも、ちょっとした修正だったので、メモ帳でやったとのこと。

なるほど・・です。

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

指示した人間は、ユニコードといえばUTF-8に決まってる・・ということから、より詳しい指示をしていなかったようなのですが、普段から文字コードを意識していない人からすれば、「そんなんわかるわけない!」ということです。 

そのへんを関係者に周知して、その件は終わりでしたが、個人的にはメモ帳の選択肢に「UTF-16」をのせるなら「unicode」なんて中途半端な書き方ではなく「UTF-16」って書いておいてほしいよな・・と思ったりしました。 

もちろん、愚痴ですけど(笑)。

ではでは。