まさに同じ問題に直面していますが、厄介なのは親のドキュメントが他社製品であるということです。 srcdoc あなたの答え. ie11特有のバグへの対応はコーディングの中で最も苦戦する業務の一つだと思います。この記事では、ie11への対応が必要な方のために、そもそもバグを発生させないプロパティを用いてコーディングする方法や対応方法、代用プロパティをご紹介します。 AWS Market Placeから作成したインスタンスのVolumeを他インスタンスにアタッチしたい。, 【PR】AWS×ユニリタ共催セミナー「クラウドで実現する事業貢献 IT の具体的な手法について考察する」を取材してみたぞの巻, 親（＝ iframe の親ドキュメント）はmetaタグで 最新のレンダリングモード（edge）が指定されている, 子（＝ iframe ドキュメント）は古いドキュメントなので、Quirksモードでレンダリングされている。DOCTYPEスイッチで指定, iframeを介して参照した時、子のドキュメントモードは「 10 」だった（IE10で参照）, iframeを介さずに参照した時、子のドキュメントモードは「 5 」だった（IE10で参照）, IE9以前 ： IE5 以前の実装で HTML の解釈とレンダリングを行うモード（ IE5 Quirks モード）, IE10以降 ： 他のブラウザとの相互運用性を重視した、W3Cで規定された互換モード（ Quirks モード ）. IE 11はエラーを表示しています：ページを表示できません。 htmlをファイルパスではなくsrcに直接設定したい。 html iframe internet-explorer-11. Internet Explorer 11は、iframeのデータURIも、iframeにインラインでHTMLを埋め込む他の方法もサポートして … srcdoc をサポートしています 属性にはデータURIが指定されていますが、ブラウザは 好きことはイラスト制作、動画編集、料理など、モノづくりにかかわる事全般。, キオミルでは将来一緒に働いてくれる仲間やパートナー、同業種の方々と交流したいと考えています。転職先や職職先としてキオミルに興味がある方、同業者やパートナーとしてキオミルに興味のある方。まずは飲み物でも飲みながらゆるやかに交流しませんか？, キオミルブログはキオミル株式会社のスタッフが日々の学びや社内のカルチャーなどを発信するブログです。, キオミル株式会社はビジネス課題を解決できるWeb制作会社です。特に中小中堅企業を中心とした、BtoB企業の新規見込客の獲得や採用強化、業務効率化の支援を得意としています。Web制作やマーケティングに関するお悩みがある方はお気軽にご相談ください。. IE10 以降で、iframeドキュメント内の表示が崩れることがあったので調査を行いました。 結果から書きますと、 iframe親のドキュメントモードが 9 以上、iframeドキュメントが IE5 Quirksモード である場合 に問題が発生する可能性があることがわかりました。 現象 IE10 以降で、iframeドキュメント内の表示が崩れることがあったので調査を行いました。, 結果から書きますと、 iframe親のドキュメントモードが 9 以上、iframeドキュメントが IE5 Quirksモード である場合 に問題が発生する可能性があることがわかりました。, Quirks モードであればドキュメントモードは「 5 」になるはずなので、iframe を介した時のドキュメントモードが意図したものになっていません。, そこで以下の meta タグを埋め込んで明示的に ドキュメントモードを指定してみました。, https://msdn.microsoft.com/en-us/library/ff955402%28v=vs.85%29.aspx, 仮にiframeが Quirks でなかったとしても、ドキュメントモードは親と同一になってしまうようです。, でも Quirks レイアウトでレンダリングは行われるらしい。ならばなぜ表示崩れが発生するのでしょうか。, IE10 以降のQuirksモードは、 IE9 以前のそれとは別物となっています。, 子のドキュメントは IE5 Quirks モードが想定されていますが、親フレームのドキュメントモードが9以上（edge）であるために IE10 の Quirks モードでレンダリングされていることが原因と考えられます。, これを回避するための方法が上述のドキュメントモードを明示的に指定する手法なのですが、親のドキュメントモードが強制適用されてしまうのでどうしようもありません。, 親フレームのドキュメントモードを 8 以下にするか、iframeドキュメントを IE10 の Quirks モードに対応するしか方法はなさそうです。, iframe を利用する開発では、親のドキュメントモードに配慮する必要があります。, 大変参考になりました。 iframeでh1を表示するために使用される上記のHTMLコード。 Chrome、Firefox、Edgeは正常に動作しています。 IE 11はエラーを表示しています：ページを表示できません。 htmlをファイルパスではなくsrcに直接設定したい。, Internet Explorer 11は、iframeのデータURIも、iframeにインラインでHTMLを埋め込む他の方法もサポートしていません。, 標準でこれを行う「意図された」方法は、 回避策を調べましたが、やはり難しそうで、対処法であげて頂いた方法しかなさそうですね。 Copyright KIOMIRU inc All rights reserved. こんにちは。キオミル株式会社フロントエンドエンジニアの野勢です。IEへの対応はコーディングの中で最も苦戦する業務の一つだと思います。, 私は基本的にコーディングの際、Google Chromeでプレビューをしています。そのため、制作段階でIE11のレイアウトの崩れを発見できないことがあります。また、ある程度までコーディングが進行した段階でレイアウトの崩れを発見した場合、どの制作過程で崩れたのか見当がつきません。崩れた段階が分からないと、対処法を検索エンジンで調べたくても、何について検索すればいいのか分からないという状態になってしまいます。, そこで、この記事では、IE11への対応が必要な方のために、そもそもバグを発生させないプロパティを用いてコーディングする方法と、どうしても使用しないといけないプロパティがある場合の対処方法や代用プロパティをご紹介します。, object-fitプロパティは、画像のサイズ調整やトリミングをCSSで実装したい場面などで少ない記述で済む便利なプロパティです。しかし、IE11やEdgeではこのプロパティが反映されないため、上図のように画像が潰れてしまいます。, IE11やEdgeで反映させたい場合は、JavaScriptの読み込みとCSSの記述を1行増やすだけで簡単に対処できます。利用するライブラリは「object-fit-images」です。使用方法は以下の通りです。, GitHubからjsファイルをダウンロードし、ofi.min.jsファイルを