Mengapa Menu Jatuh Turun Saya Tersembunyi Di Sebalik Medan Input Saya dalam IE7?

IE7: Memahami Kekeliruan Lapisan Indeks-Z

IE7 mempersembahkan kerumitan dalam aplikasi indeks-z untuk lapisan elemen. Memahami cara z-index berfungsi boleh membantu menyelesaikan isu pelapisan dengan berkesan.

Z-Index dan Konteks Penimbunan

Bertentangan dengan namanya, z-index bukanlah ukuran mutlak . Elemen dengan indeks z yang lebih tinggi boleh disembunyikan di sebalik elemen dengan indeks z yang lebih rendah jika ia tergolong dalam konteks tindanan yang berbeza.

Konteks tindanan dicipta untuk elemen yang diposisikan (mutlak, relatif atau tetap). Walau bagaimanapun, IE7 tersilap mentafsir elemen kedudukan tanpa indeks-z sebagai mencipta konteks tindanan baharu.

Masalah dalam Kod Anda

Dalam contoh anda, anda mempunyai rentang kedudukan ( <span>) yang tidak mempunyai indeks-z. IE7 mentafsirkan ini sebagai mencipta konteks tindanan baharu, menjadikan menu lungsur turun (

) tersembunyi di belakang medan input ().

Penyelesaian Yang Mungkin

Untuk menyelesaikan isu ini, pertimbangkan perkara berikut penyelesaian:

1. Tambah z-index pada Span Diposisikan:

#envelope-1 {
  position: relative;
  z-index: 1;
}

Ini secara eksplisit mentakrifkan konteks tindanan dan memastikan dropdown bertindih dengan medan input.

2. Alih keluar Kedudukan daripada Span:

<span>

Dengan mengalih keluar kedudukan, anda menghapuskan konteks tindanan yang tidak perlu. Elemen kini akan mengikut susunan pelapisan lalai, di mana dropdown diletakkan di atas medan input.

Pertimbangan Tambahan

• Z-index hanya mempengaruhi elemen dalam konteks susun yang sama.
• IE6 mempunyai pepijat tambahan di mana kotak pilihan dan iframe sentiasa terapung di atas segala-galanya lain.
• Untuk penjelasan yang lebih terperinci dan contoh pepijat yang serupa, rujuk: https://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z- index-bug/

Atas ialah kandungan terperinci Mengapa Menu Jatuh Turun Saya Tersembunyi Di Sebalik Medan Input Saya dalam IE7?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!