Wie gehe ich mit Inkonsistenzen in der Dropdown-Listenbreite im Internet Explorer um?

So passen Sie die Breite von Dropdown-Listen im IE an

Im Internet Explorer erben Dropdown-Listen die Breite ihrer zugehörigen Dropboxen. In anderen Browsern wie Firefox passt sich die Listenbreite jedoch dem Inhalt an, was zu Inkonsistenzen im Erscheinungsbild führt. Dies kann zu übermäßigem Leerraum auf Seiten führen, wenn die Dropbox-Breite erweitert wird, um das längste Element aufzunehmen.

Um dieses Problem zu beheben, kann die Verwendung von jQuery und CSS eine Problemumgehung darstellen. Der folgende jQuery-Code verarbeitet verschiedene Ereignisse, um die Breite der Dropdown-Liste umzuschalten, einschließlich Fokus, Mouseover, Mouseout, Klicks und Unschärfen:

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

Ergänzen Sie diesen jQuery-Code mit dem folgenden CSS:

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

Dieses CSS legt eine feste Breite für Dropboxen fest, sodass Sie eine gewünschte Breite angeben können, beispielsweise 150 Pixel. Wenn die Dropdown-Liste erweitert wird, wird die Klasse „expand“ angewendet, die die feste Breite mit einer automatisch berechneten Breite basierend auf dem Inhalt überschreibt.

Um diese Lösung zu verwenden, fügen Sie einfach die Klasse „wide“ zur relevanten hinzu Dropdown-Elemente:

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

Dieser Ansatz gewährleistet eine einheitliche Breite in allen Browsern und ermöglicht gleichzeitig die Erweiterung und Verkleinerung der Dropdown-Liste nach Bedarf, wodurch das IE-spezifische Problem der Breitenvererbung gelöst wird.

Das obige ist der detaillierte Inhalt vonWie gehe ich mit Inkonsistenzen in der Dropdown-Listenbreite im Internet Explorer um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!