Mengapakah sifat z-index tidak berfungsi dengan fail PDF dalam iframe dalam Internet Explorer?

Isu z-index dengan PDF dalam iframe dalam Internet Explorer

Menyemak imbas web, banyak pembangun menghadapi cabaran untuk meletakkan elemen dengan z -harta indeks. Khususnya, apabila menggunakan iframe yang mengandungi fail PDF, sifat z-index mungkin gagal berfungsi dalam Internet Explorer. Walaupun isu itu mungkin tidak timbul dalam penyemak imbas lain seperti Google Chrome, ia boleh menyebabkan halangan dalam mencapai susunan visual yang diingini.

Latar Belakang: Elemen Bertingkap dan Tanpa Tingkap dalam Internet Explorer

Untuk memahami punca isu, adalah penting untuk mengetahui cara Internet Explorer mengkategorikan elemen HTML. IE mengelaskan elemen kepada dua jenis: bertingkap dan tanpa tingkap.

• Elemen tanpa tetingkap, seperti div dan input, dipaparkan secara langsung oleh penyemak imbas dan menduduki satah yang sama, menghormati z mereka -nilai indeks.
• Elemen bertingkap, seperti kawalan ActiveX dan elemen pilih, dipaparkan di luar enjin pemaparan utama penyemak imbas dan dilukis di atas elemen tanpa tingkap, tanpa mengira z-index .

Gelagat Iframe dalam Internet Explorer

Pada mulanya, iframe dianggap sebagai elemen bertingkap dalam IE5, tetapi ini berubah dalam IE5.5, di mana ia menjadi elemen tanpa tingkap . Walau bagaimanapun, atas sebab keserasian ke belakang, iframe masih mempunyai keupayaan untuk melukis elemen bertingkap dengan indeks z yang lebih rendah.

Isu

Isu timbul apabila iframe yang mengandungi PDF (elemen bertingkap) diletakkan pada halaman web. Disebabkan oleh gelagat unik iframe dalam IE, sebarang elemen tanpa tetingkap (cth., teks biasa atau butang) yang diletakkan di atas iframe akan disembunyikan di sebalik PDF, tanpa mengira nilai indeks-znya.

Penyelesaian : Iframe Meliputi

Untuk menyelesaikan isu ini, iframe tambahan, dikenali sebagai "iframe penutup", diperkenalkan. Iframe ini diletakkan di antara iframe PDF dan elemen tanpa tingkap yang perlu dipaparkan di atas. Dengan menetapkan indeks z iframe penutup kepada nilai negatif (cth., -1), ia diletakkan dengan berkesan di belakang semua elemen lain, membolehkan elemen tanpa tingkap kelihatan pada PDF.

Pelaksanaan

Kod HTML untuk melaksanakan penyelesaian ini akan kelihatan seperti ini:

<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="path/to/pdf.pdf" width="200" height="200"></iframe></code>

Dengan CSS berikut:

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

Sokongan Penyemak Imbas

Penyelesaian ini telah diuji dan disahkan berfungsi dalam Internet Explorer 7 hingga 9. Penting untuk ambil perhatian bahawa pendekatan iframe meliputi mungkin tidak sesuai untuk semua kes atau penyemak imbas dan penyelesaian alternatif mungkin lebih sesuai bergantung pada keperluan khusus.

Atas ialah kandungan terperinci Mengapakah sifat z-index tidak berfungsi dengan fail PDF dalam iframe dalam Internet Explorer?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!