Mengapa z-index Gagal untuk PDF dalam Iframes dalam Internet Explorer?

z-index Gagal dalam Internet Explorer untuk PDF dalam iframe

Isu:

z-index tidak berfungsi sebagai dijangka untuk iframe yang memaparkan PDF dalam Internet Explorer 8; iframe muncul di atas sebarang elemen bertindih.

Penjelasan:

Internet Explorer membezakan antara elemen bertingkap dan tanpa tingkap. Elemen HTML standard seperti div dan input adalah tanpa tetingkap, manakala elemen yang dipaparkan di luar MSHTML (cth., elemen pilih dan kawalan ActiveX) ditingkap. Iframes telah bertingkap dalam IE 5 tetapi menjadi tanpa tingkap dalam IE 5.5. Walau bagaimanapun, untuk keserasian ke belakang, iframe masih mengatasi elemen bertingkap dengan indeks z yang lebih rendah.

Penyelesaian:

Untuk menyelesaikan isu ini, masukkan satu lagi iframe antara kandungan halaman yang diingini dan iframe PDF:

Kod:

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 tambahan ini bertindak sebagai tindanan telus, menghalang iframe PDF daripada bertindih dengan elemen halaman lain.

Sokongan:

Penyelesaian ini telah diuji dan berfungsi dalam Internet Explorer 7-9. Untuk keserasian dengan penyemak imbas lain, pertimbangkan untuk menambah iframe menggunakan JavaScript atau membungkusnya dalam ulasan bersyarat IE sahaja:

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

Atas ialah kandungan terperinci Mengapa z-index Gagal untuk PDF dalam Iframes dalam Internet Explorer?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!