Wie kann der Unterschied in der Dropdown-Listenbreite zwischen Internet Explorer und Firefox mithilfe von jQuery behoben werden?

Diskrepanz in der IE-Dropdown-Listenbreite

Im Internet Explorer erben Dropdown-Listen die Breite der Dropbox, während sie sich in Firefox an die Liste anpassen Inhalt. Dies kann problematisch sein, da Dropboxen unnötig überdimensioniert sein müssen, um die längste Option unterzubringen.

CSS-Lösung

Leider ist es nicht möglich, unterschiedliche Breiten für die Dropbox und die Dropdown-Liste festzulegen allein mit CSS möglich.

jQuery Workaround

Ein Workaround mit jQuery kann den gewünschten Effekt erzielen. Diese Lösung erfasst verschiedene Ereignisse (Fokus, Mouseover, Klick, Mouseout, Unschärfe) und ändert dynamisch die CSS-Klasse der Dropdown-Liste.

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

Zusätzlich ist das folgende CSS erforderlich:

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

Durch Zuweisen der Klasse „wide“ zur Dropdown-Liste passt die Problemumgehung ihre Breite entsprechend an und löst so die IE-Diskrepanz.

Das obige ist der detaillierte Inhalt vonWie kann der Unterschied in der Dropdown-Listenbreite zwischen Internet Explorer und Firefox mithilfe von jQuery behoben werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!