Bagaimana untuk Menyelesaikan Perbezaan Lebar Senarai Drop-Down Antara Internet Explorer dan Firefox Menggunakan jQuery?

Percanggahan Lebar Senarai Jatuh Turun IE

Dalam Internet Explorer, senarai lungsur turun mewarisi lebar kotak jatuh, manakala dalam Firefox mereka menyesuaikan diri dengan senarai kandungan. Ini boleh menjadi masalah, memerlukan peti jatuh bersaiz terlalu besar untuk menampung pilihan terpanjang.

Penyelesaian CSS

Malangnya, menetapkan lebar yang berbeza untuk peti jatuh dan senarai lungsur turun bukanlah mungkin menggunakan CSS sahaja.

Penyelesaian jQuery

Penyelesaian menggunakan jQuery boleh mencapai kesan yang diingini. Penyelesaian ini menangkap pelbagai peristiwa (fokus, alih tetikus, klik, keluar tetikus, kabur) dan mengubah suai kelas CSS senarai lungsur turun secara dinamik.

if (!$.support.leadingWhitespace) { // if IE6/7/8
    $('select.wide')
        .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
        .bind('click', function() { $(this).toggleClass('clicked'); })
        .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
        .bind('blur', function() { $(this).removeClass('expand clicked'); });
}

Selain itu, CSS berikut diperlukan:

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

Dengan memberikan kelas "lebar" pada senarai lungsur turun, penyelesaian melaraskan lebarnya dengan sewajarnya, menyelesaikan percanggahan IE.

Atas ialah kandungan terperinci Bagaimana untuk Menyelesaikan Perbezaan Lebar Senarai Drop-Down Antara Internet Explorer dan Firefox Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!