Mengapa Jatuh Turun Pilih Lebar Tetap Memenggal Kandungan dalam Internet Explorer dan Bagaimana Saya Boleh Membetulkannya?

Pilih Dropdown dengan Lebar Tetap Potongan Kandungan dalam IE

Penerangan Isu:

Apabila menggunakan lungsur turun pilih dengan lebar tetap, item tertentu mungkin mempunyai teks yang melebihi lebar yang ditentukan, mengakibatkan pemangkasan dalam pelayar Internet Explorer (IE). Dalam IE6 dan IE7, senarai juntai bawah dihadkan kepada lebar yang ditentukan, menjadikannya mustahil untuk melihat kandungan lengkap item yang lebih panjang.

CSS dan HTML:

The disediakan CSS dan kod HTML menunjukkan isu:

select.center_pull {
    width: 145px;
}

<select>

Penyelesaian:

IE 8 dan Ke Atas:

Untuk IE 8 dan lebih tinggi , penyelesaian berasaskan CSS mudah menyelesaikan isu:

select:focus {
    width: auto;
    position: relative;
}

Peraturan ini melaraskan lebar senarai lungsur turun untuk memuatkan item terpanjang apabila lungsur turun difokuskan.

IE 7 dan Bawah:

Malangnya, IE 7 dan ke bawah tidak menyokong : pemilih fokus, jadi teknik tambahan diperlukan untuk menangani pemangkasan:

• JavaScript: Kira secara dinamik lebar item terpanjang dan tetapkan lebar senarai lungsur turun dengan sewajarnya menggunakan JavaScript.
• Css Hacks : Gunakan penggodaman CSS untuk memaksa senarai lungsur turun yang lebih luas untuk IE, seperti menggunakan peraturan lebar: auto dengan keutamaan yang lebih tinggi untuk pelayar IE khususnya.

Atas ialah kandungan terperinci Mengapa Jatuh Turun Pilih Lebar Tetap Memenggal Kandungan dalam Internet Explorer dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!