Internet Explorer の Iframe で PDF の z-index が失敗するのはなぜですか?

z-index が iframe 内の PDF に対して Internet Explorer で失敗する

問題:

z-index が機能しませんInternet Explorer 8 で PDF を表示する iframe に期待されます。 iframe は、重なっている要素の上に表示されます。

説明:

Internet Explorer では、ウィンドウ要素とウィンドウなし要素が区別されます。 div や input などの標準 HTML 要素はウィンドウなしですが、MSHTML の外部でレンダリングされる要素 (選択要素や ActiveX コントロールなど) はウィンドウ化されます。 IFRAME は IE 5 ではウィンドウ表示されていましたが、IE 5.5 ではウィンドウレスになりました。ただし、下位互換性を維持するため、iframe はウィンドウ要素をより低い z-index でオーバーライドします。

解決策:

この問題を回避するには、別の要素を挿入します。目的のページコンテンツと PDF の間の iframe iframe:

Code:

HTML:

<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>

CSS:

<code class="css">#outer {
    position: relative;
    left: 150px;
    top: 20px;
    width: 100px;
    z-index: 2;
}

#inner {
    background: red;
}

.cover {
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}

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

この追加の iframe は透明なオーバーレイとして機能し、PDF iframe が他のページ要素と重なるのを防ぎます。

サポート:

このソリューションはテストされており、Internet Explorer 7 ～ 9 で動作します。他のブラウザとの互換性を確保するには、JavaScript を使用して iframe を追加するか、IE 専用の条件付きコメントで囲むことを検討してください:

<code class="html"><!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]--></code>

以上がInternet Explorer の Iframe で PDF の z-index が失敗するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。