Bagaimana untuk Menyesuaikan Lebar Senarai Turun Merentasi Pelayar Berbeza?

Pengubahsuaian Lebar Senarai Jatuh Turun IE

Dalam Internet Explorer, senarai juntai bawah mencerminkan lebar kotak jatuhnya, manakala dalam Firefox, ia menyesuaikan diri dengan kandungannya. Kekangan ini memerlukan mengembangkan kotak drop untuk menampung pilihan terpanjang, menghasilkan halaman web yang tidak menarik dari segi estetika.

Penyelesaian Berasaskan CSS untuk Memvariasikan Lebar

Untuk mengatasi isu ini dan benarkan lebar yang berbeza untuk kotak lungsur dan senarai lungsur menggunakan CSS, pertimbangkan perkara berikut:

Kaedah berasaskan jQuery yang digariskan di bawah mengendalikan semua acara papan kekunci dan tetikus, termasuk klik:

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

Gabungkan ini skrip dengan CSS berikut:

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

Dengan menambahkan kelas "lebar" pada elemen lungsur turun yang diperlukan, anda boleh menggunakan pengubahsuaian ini. Contohnya:

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

Terokai demonstrasi langsung dalam jsfiddle ini: [pautan]

Atas ialah kandungan terperinci Bagaimana untuk Menyesuaikan Lebar Senarai Turun Merentasi Pelayar Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!