Mengapakah indeks-z tidak berfungsi apabila meletakkan elemen pada PDF dalam iframe dalam Internet Explorer?

Isu z-index dengan PDF dalam iframe dalam Internet Explorer

Walaupun kemudahan penggunaan z-index untuk mengawal susunan susunan HTML elemen, kadangkala boleh menghadapi masalah dalam penyemak imbas tertentu. Satu isu sedemikian timbul dalam Internet Explorer apabila cuba meletakkan elemen pada iframe yang mengandungi fail PDF.

Elemen Tanpa Tetingkap lwn. Tanpa Tetingkap dalam IE

Untuk memahami isu ini , adalah penting untuk mengetahui cara Internet Explorer mengkategorikan elemen HTML. Ia mengklasifikasikannya kepada dua jenis:

• Elemen Tanpa Tetingkap: Elemen seperti div dan input adalah tanpa tetingkap, diberikan oleh penyemak imbas dalam satah MSHTML tunggal dan mematuhi tertib indeks-z .
• Elemen Bertingkap: Elemen seperti select dan kawalan ActiveX dipaparkan di luar MSHTML dan wujud dalam satah berasingan yang dilukis di atas elemen tanpa tingkap, tanpa mengira z-index.

Pengecualian Iframe dalam IE

Secara sejarah, iframe ialah elemen bertingkap, tetapi ini berubah dalam IE 5.5. Walaupun kini tanpa tingkap, iframe masih mengekalkan tingkah laku melukis di atas elemen bertingkap dengan indeks z yang lebih rendah untuk keserasian ke belakang.

Menyelesaikan Isu indeks z

Dalam kes khusus PDF dalam iframe, PDF akan sentiasa dipaparkan di atas kandungan halaman biasa kerana sifatnya yang bertingkap. Untuk menyelesaikan isu ini, iframe tambahan mesti diletakkan di antara kandungan halaman dan iframe PDF. Iframe tambahan ini bertindak sebagai "penutup" dan memastikan elemen tanpa tingkap boleh diletakkan di atas PDF.

Contoh Kod

Berikut ialah contoh kod yang disemak semula yang menunjukkan penyelesaiannya :

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

Kesimpulan

Dengan menggunakan iframe "penutup" tambahan, adalah mungkin untuk memaksa elemen muncul pada PDF dalam iframe dalam Internet Penjelajah, walaupun indeks-z nampaknya tidak berkesan pada mulanya. Penyelesaian ini menyediakan penyelesaian kepada gelagat Internet Explorer tertentu dan memastikan susunan susunan yang dimaksudkan dikekalkan.

Atas ialah kandungan terperinci Mengapakah indeks-z tidak berfungsi apabila meletakkan elemen pada PDF dalam iframe dalam Internet Explorer?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!