Pertanyaan tentang elemen terpilih dalam HTML telah diajukan di banyak tempat, dan dalam proyek beberapa waktu yang lalu, saya kebetulan menghadapi dua pertanyaan kecil tentang elemen tertentu. Mari kita ringkas di sini. Yang pertama adalah yang paling terkenal: masalah umum bahwa lapisan mengambang div tidak dapat menutupi elemen pilih di bawah IE6. Pertama, contoh berikut disediakan: Catatan: Jika Anda melihatnya di bawah Firfox dan IE7
Pertanyaan tentang elemen terpilih dalam HTML telah diajukan di banyak tempat, dan dalam proyek beberapa waktu yang lalu, saya kebetulan menghadapi dua pertanyaan kecil tentang elemen tertentu. Mari kita ringkas di sini.
Artikel Terkait: Solusi untuk Masalah Lapisan Div Ditutupi oleh Lapisan Flash
Yang pertama adalah yang paling terkenal: masalah umum bahwa lapisan mengambang div tidak dapat menutupi elemen pilih di bawah IE6. Pertama, contoh berikut disediakan:
Catatan: Jika Anda melihat kedua di bawah Firfox dan di bawah IE7, hasilnya sama: lapisan mengambang A, B, dan C dapat menjadi kenyataan normal, yaitu elemen pilih di bawah ini diblokir. Namun, di bawah IE6, ada tiga situasi yang berbeda, Floating Layer A masih normal; Lapisan mengambang B tubuh utama menutupi elemen pilih, tetapi bingkai lapisan mengambang tidak dapat menutupi elemen pilih; Floating Layer 3 tidak dapat menutupi elemen pilih sama sekali. Alasan untuk fenomena ini adalah bahwa di IE6, browser menganggap elemen pilih sebagai elemen tingkat jendela. Pada saat ini, Div atau elemen biasa lainnya tidak dapat menutupi elemen pilih tidak peduli seberapa tinggi indeks z diatur, tetapi pilih dapat diblokir oleh iframe yang juga merupakan elemen tingkat jendela. Beginilah contoh di atas. Floating Layer C hanyalah lapisan floating div. Saya tidak akan membicarakannya lebih banyak di sini, lihat saja struktur Lapisan Terapung B:
<Div class = containdiv> <iframe class = maskiframe> </iframe> <v class = mainDiv> lapisan mengambang b </div> </div>
Gunakan div untuk meletakkan konten div aktual dan elemen iframe bersama -sama, dan gaya yang sesuai adalah:
.containdiv {position: absolute; Atas: 140px; Kiri: 60px; } .maskiframe {position: absolute; Kiri: -1px; Atas: -1px; z -index: -1; Border: 1px solid #000; Tinggi: 50px; Lebar: 50px; _Height: 48px; _width: 48px;}. MainDiv {latar belakang: #EBAC3B; lebar: 50px; tinggi: 50px;}
Floating Layer B menggunakan iframe untuk memposisikan dan mengatur z -index: -1; Dalam ContainsDiv, dan kemudian memungkinkan MainDiv yang benar -benar menempatkan konten di bawah ini untuk menutupi iframe. Pada saat ini, iframe dapat menutupi elemen pilih, dan secara tidak langsung membuat MainDiv juga menutupi elemen pilih. Namun, Floating Layer B masih tidak sempurna, karena perbatasan iframe dari Lapisan Terapung B di sini menggunakan perbatasan iframe. IFRAME itu sendiri dapat menutupi Select, tetapi perbatasannya tidak bisa, sehingga lapisan B mengambang terjadi.
Lapisan mengambang A memecahkan masalah ini dan telah mencapai pemikiran ideal. Ini pada dasarnya sama dengan Floating Layer B, kecuali bahwa itu membuat iframe lebih dari MainDiv naik, bawah, kiri dan kanan, dan kemudian memberikan perbatasan MainDiv. Dengan cara ini, perbatasan mengambang disediakan oleh MainDiv, dan seluruh MainDiv dan perbatasan berada di iframe, sehingga efek ideal tercapai!
Masalah kedua dengan SELECT adalah masalah opsi opsi yang menghasilkan secara dinamis di bawah IE. Lihat contoh pertanyaan kedua di atas. Saat mengklik tautan (Limited FF), Anda dapat menambahkan 3 elemen opsi ke elemen pilih di bawah FF, tetapi tidak mungkin di bawah IE; Saat mengklik tautan (Umum), Anda dapat menambahkan 3 elemen opsi ke elemen pilih di bawah IE dan FF. Alasannya adalah bahwa tautan pertama adalah menambahkan elemen opsi melalui atribut innerHTML dari elemen pilih.
document.geteLementById (addselect) .innerHtml = ABC;
Tidak ada masalah dengan ini di FF, tetapi IE tidak dapat menambahkan elemen opsi anak ke elemen pilih melalui metode ini, tetapi metode yang disediakan oleh tautan kedua diperlukan: diperlukan:
document.geteLementById (addSelect) .options.add (opsi baru (a, false, true));