Bagaimana untuk Mengendalikan Ketidakkonsistenan Lebar Senarai Drop-Down dalam Internet Explorer?

Cara Melaraskan Lebar Senarai Jatuh Turun dalam IE

Dalam Internet Explorer, senarai lungsur turun mewarisi lebar peti jatuh yang berkaitan. Walau bagaimanapun, dalam pelayar lain seperti Firefox, lebar senarai menyesuaikan dengan kandungan, mewujudkan ketidakkonsistenan dalam penampilan. Ini boleh membawa kepada ruang putih yang berlebihan dalam halaman jika lebar peti jatuh dikembangkan untuk menampung item terpanjang.

Untuk menangani isu ini, menggunakan jQuery dan CSS boleh menyediakan penyelesaian. Kod jQuery di bawah mengendalikan pelbagai acara untuk menogol lebar senarai lungsur turun, termasuk fokus, alih tetikus, keluar tetikus, klik dan kabur:

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'); });
}

Lengkapkan kod jQuery ini dengan CSS berikut:

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

CSS ini menetapkan lebar tetap untuk dropbox, membolehkan anda menentukan lebar yang diingini, seperti 150 piksel. Apabila senarai lungsur turun berkembang, kelas "kembangkan" digunakan, mengatasi lebar tetap dengan lebar yang dikira secara automatik berdasarkan kandungan.

Untuk menggunakan penyelesaian ini, hanya tambahkan kelas "lebar" pada yang berkaitan elemen lungsur turun:

<select class="wide">
    ...
</select>

Pendekatan ini memastikan lebar seragam merentas penyemak imbas sambil membenarkan senarai lungsur turun berkembang dan mengecut mengikut keperluan, menyelesaikan isu warisan lebar khusus IE.

Atas ialah kandungan terperinci Bagaimana untuk Mengendalikan Ketidakkonsistenan Lebar Senarai Drop-Down dalam Internet Explorer?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!