Internet Explorer の iframe で PDF 上に要素を配置するときに Z-index が機能しないのはなぜですか?

Internet Explorer の iframe での PDF に関する z-index の問題

z-index を使用して HTML の重なり順を制御するのは簡単であるにもかかわらず要素を使用すると、特定のブラウザで問題が発生する場合があります。このような問題の 1 つは、PDF ファイルを含む iframe 上に要素を配置しようとすると、Internet Explorer で発生します。

IE におけるウィンドウ要素とウィンドウなし要素

この問題を理解するにはInternet Explorer が HTML 要素をどのように分類するかを認識することが重要です。これらは 2 つのタイプに分類されます:

• ウィンドウレス要素: div や input のような要素はウィンドウレスであり、単一の MSHTML プレーンでブラウザーによってレンダリングされ、z-index 順序に従います。 .
• ウィンドウ要素: select コントロールや ActiveX コントロールなどの要素は MSHTML の外部でレンダリングされ、z-index に関係なく、ウィンドウのない要素の上に描画される別のプレーンに存在します。

IE での iframe 例外

これまで、iframe はウィンドウ要素でしたが、これは IE 5.5 で変更されました。 iframe はウィンドウレスになりましたが、下位互換性のために、低い Z-index を使用してウィンドウ要素を描画する動作を維持しています。

Z-index の問題の解決

iframe 内の PDF の特定のケースでは、PDF はウィンドウ化される性質があるため、常に通常のページ コンテンツの上にレンダリングされます。この問題を解決するには、ページ コンテンツと PDF iframe の間に追加の iframe を配置する必要があります。この追加の iframe は「カバー」として機能し、ウィンドウのない要素を PDF 上に配置できるようにします。

コード サンプル

解決策を示す改訂されたコード サンプルは次のとおりです。 :

<code class="html"><div id="outer">
    <div id="inner">my text that should be on top</div>
    <iframe class="cover" src="about:blank"></iframe>
</div>

<iframe id="pdf" src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"></iframe></code>

<code class="css">#outer {
    ...
    z-index: 2;
}

.cover {
    ...
    z-index: -1;
}

#pdf {
    ...
    z-index: 1;
}</code>

結論

追加の「カバー」iframe を利用することで、インターネットの iframe 内の PDF 上に要素を強制的に表示することができますExplorer (z-index が最初は効果がないように見えても)。この回避策は、Internet Explorer の特定の動作に対する解決策を提供し、意図したスタック順序が確実に維持されるようにします。

以上がInternet Explorer の iframe で PDF 上に要素を配置するときに Z-index が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。