"BOKU"のITな日常

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

 <iframe>内の表示で、IE11だと大丈夫で、Google Chromeでレイアウトが崩れるケース

f:id:arakan_no_boku:20190301193447j:plain

 

目次

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

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

しかも、IE11だと普通に表示されて、Google Chromeではレイアウトが崩れるという珍しいケースでした。

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で保存してはいけない

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

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

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

f:id:arakan_no_boku:20180323225117j:plain

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

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

なるほど・・です。

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

指示した人間は、ユニコードといえばUTF-8だと思い込んでいたみたいです。

ただ、指示をうけた側からすれば、unicodeUTF-16UTF-8があることも知らないのに「そんなんわかるわけない!」ということでした。 

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

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

ではでは。