IE10以降で iframe 内ドキュメントの表示が崩れることがある問題について

| 1件のフィードバック

IE10 以降で、iframeドキュメント内の表示が崩れることがあったので調査を行いました。

結果から書きますと、 iframe親のドキュメントモードが 9 以上、iframeドキュメントが IE5 Quirksモード である場合 に問題が発生する可能性があることがわかりました。

現象

  • 親(= iframe の親ドキュメント)はmetaタグで 最新のレンダリングモード(edge)が指定されている
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">
  • 子(= iframe ドキュメント)は古いドキュメントなので、Quirksモードでレンダリングされている。DOCTYPEスイッチで指定
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  • 親ドキュメント内iframeから子を参照すると一部スタイルが崩れている
  • 子を iframe を介さずに直接表示した場合は問題なし
  • iframeを介して参照した時、子のドキュメントモードは「 10 」だった(IE10で参照)
  • iframeを介さずに参照した時、子のドキュメントモードは「 5 」だった(IE10で参照)

子のドキュメントモード指定が効いていない

Quirks モードであればドキュメントモードは「 5 」になるはずなので、iframe を介した時のドキュメントモードが意図したものになっていません。

そこで以下の meta タグを埋め込んで明示的に ドキュメントモードを指定してみました。

<meta http-equiv="X-UA-Compatible" content="IE=5">

ページ読み込み時にドキュメントモードをアラートするスクリプトを埋め込んで確認。

 <script>
  alert(document.documentMode)
 </script>

iframeを介して参照した結果は 「 10 」 。効いていない。

子のドキュメントモードには親のドキュメントモードが強制的に適用される

MSのサイトに iframe ハンドリングについての記述がありました。

https://msdn.microsoft.com/en-us/library/ff955402%28v=vs.85%29.aspx

リンク先のダイアグアムを辿ってみます。

  1. それはiframe? (yes)
  2. 親のドキュメントモードはIE9またはそれ以上? (yes)
  3. iframe ドキュメントはQuirksモード? (yes)
  4. 親と同じドキュメントモード、且つQuirksレイアウトでレンダリングされます。

仮にiframeが Quirks でなかったとしても、ドキュメントモードは親と同一になってしまうようです。

でも Quirks レイアウトでレンダリングは行われるらしい。ならばなぜ表示崩れが発生するのでしょうか。

子は Quirks モードでレンダリングされているが・・・

IE10 以降のQuirksモードは、 IE9 以前のそれとは別物となっています。

  • IE9以前   :  IE5 以前の実装で HTML の解釈とレンダリングを行うモード( IE5 Quirks モード)
  • IE10以降 : 他のブラウザとの相互運用性を重視した、W3Cで規定された互換モード( Quirks モード )

今回のケースでは、後者の Quirks モードが使われるようです。

子のドキュメントは IE5 Quirks モードが想定されていますが、親フレームのドキュメントモードが9以上(edge)であるために IE10 の Quirks モードでレンダリングされていることが原因と考えられます。

これを回避するための方法が上述のドキュメントモードを明示的に指定する手法なのですが、親のドキュメントモードが強制適用されてしまうのでどうしようもありません。

対処法

親フレームのドキュメントモードを 8 以下にするか、iframeドキュメントを IE10 の Quirks モードに対応するしか方法はなさそうです。

iframe を利用する開発では、親のドキュメントモードに配慮する必要があります。

IE10以降で iframe 内ドキュメントの表示が崩れることがある問題について」への1件のフィードバック

  1. 武井@GREENFLAG.CO.JP

    大変参考になりました。
    まさに同じ問題に直面していますが、厄介なのは親のドキュメントが他社製品であるということです。
    回避策を調べましたが、やはり難しそうで、対処法であげて頂いた方法しかなさそうですね。
    子のドキュメントを変更するのは工数や納期的に厳しそうですし、親のドキュメントに手をいれてもらうのも現実できはなさそうです。仕方ないので、子のドキュメントでモードを取得して、対応可能なモード以外であれば、設定方法等をアナウンスするページを表示すし、IISの設定やブラウザーの設定など、ユーザによる運用回避をお願いするかしないかなと思っています。しかし、この方法も万が一親ドキュメント側に問題がでるようであれば使えないという問題がありますが。なんとも厄介な問題です。

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>