更新: Matthew Wiseには、特に私のアプローチに問題がある場合や醜いハックが嫌いな場合に検討する必要のある、非常に賢い代替ソリューションがあります。
IEのウィンドウ要素を他の要素でカバーする方法はありますが、気に入らないでしょう。
背景:ウィンドウ要素とウィンドウなし要素
レガシーIEは、要素をウィンドウ付きとウィンドウなしの2つのタイプに分類します。
div
のような通常の要素input
はウィンドウレスです。それらはブラウザ自体によって単一のMSHTML平面でレンダリングされ、互いのz順序を尊重します。
MSHTMLの外部でレンダリングされた要素はウィンドウ化されます; たとえば、select
(OSによってレンダリングされる)およびActiveXコントロール。それらは互いのzオーダーを尊重しますが、すべてのウィンドウのない要素の上にペイントされた別個のMSHTML平面を占有します。
唯一の例外はiframe
です。IE 5ではiframe
、ウィンドウ要素でした。これはIE5.5で変更されました。現在はウィンドウのない要素ですが、下位互換性の理由から、z-indexが低いウィンドウ要素を描画します。
言い換えるiframe
と、ウィンドウ要素とウィンドウなし要素の両方のz-indexを尊重します。iframe
ウィンドウ要素の上に配置すると、上に配置されたウィンドウのない要素iframe
が表示されます。
これはどういう意味ですか
PDFは常に通常のページコンテンツの上にペイントされます— <a href="http://blogs.msdn.com/b/ie/archive/2006/01/17/for-the-select-few.aspx "rel ="noreferrer">同様のselect
要素はIE7までありました。修正はiframe
、コンテンツとPDFの間に別の要素を配置することです。
デモ
jsFiddle: http: //jsfiddle.net/Jordan/gDuCE/
コード
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>
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;
}
サポート
これはテスト済みであり、IE 7–9で機能するはずです。他のブラウザのDOMに表示されることに不安を感じる場合は、JavaScriptで追加するか、IEのみの条件付きコメントでラップすることができます。
<!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]-->