Bagaimana untuk Melaraskan Lebar Senarai Drop-Down dalam Internet Explorer?

Kawalan Lebar Senarai Jatuh Bawah IE

Masalah:

Dalam Internet Explorer (IE ), senarai lungsur turun mewarisi lebar kotak lungsur turun induknya, menghasilkan penampilan yang sukar digunakan apabila pemilih pilihan terpanjang melangkaui lebar kotak lungsur turun.

Penyelesaian: CSS - dan Penyelesaian Berasaskan JavaScript

Untuk mengatasi isu ini, gabungan CSS dan jQuery boleh digunakan untuk menetapkan lebar yang berbeza untuk kotak lungsur turun dan senarai pilihannya:

$(document).ready(function() {
  $('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'); });
});

Gunakan CSS berikut:

select {
  width: 150px; /* or desired width */
}
select.expand {
  width: auto;
}

Tugaskan kelas 'luas' kepada elemen lungsur turun yang terjejas:

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

Pendekatan ini memastikan bahawa kotak lungsur turun mengekalkan lebar tetap sambil membenarkan senarai lungsur berkembang secara dinamik, menampung pemilih paling lama tersedia.

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