Mengapa Menu Jatuh Turun Saya Muncul di Sebalik Video YouTube Terbenam dalam Chrome dan IE9?

Video YouTube Dibenamkan melalui iframe Mengabaikan z-index?

Dalam percubaan untuk mencipta menu navigasi lungsur turun berbilang peringkat mendatar, pengguna menghadapi anomali di mana menu lungsur turun gagal muncul di atas video YouTube terbenam dalam Chrome dan IE9 (sedangkan, ia berfungsi dalam Firefox). Isu ini diasingkan kepada video YouTube itu sendiri, bukan teknik iframe yang digunakan.

Soalan 1: Mengapa Percanggahan?

Walaupun dengan z-index yang ditetapkan secara eksplisit:-999 !penting; untuk iframe, menu lungsur turun kekal dikaburkan di sebalik video. Ini mencadangkan gangguan CSS dalam kod benam YouTube.

Soalan 2: Menyelesaikan Masalah dengan wmode

Untuk membetulkan keadaan, menambahkan wmode pada kod benam YouTube nampaknya menyelesaikan isu itu. Khususnya, parameter berikut boleh digunakan:

• &wmode=Opaque
• &wmode=transparent

Sebab teknikal di sebalik penyelesaian ini berfungsi masih tidak jelas. Walau bagaimanapun, contoh kod berikut menggambarkan pelaksanaannya:

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque"></iframe>

Sebagai alternatif, kod jQuery berikut boleh digunakan untuk membetulkan masalah indeks-z untuk semua iframe pada halaman:

//Fix z-index youtube video embedding
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

Dengan menggunakan parameter wmode, kod benam YouTube boleh disesuaikan untuk berkelakuan seperti yang diharapkan, membenarkan menu lungsur turun muncul di atas video terbenam dalam semua penyemak imbas utama.

Atas ialah kandungan terperinci Mengapa Menu Jatuh Turun Saya Muncul di Sebalik Video YouTube Terbenam dalam Chrome dan IE9?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!