Wie kann ich die Breite von Dropdown-Listen in verschiedenen Browsern anpassen?

Änderung der Breite der IE-Dropdown-Liste

Im Internet Explorer spiegelt die Dropdown-Liste die Breite ihrer Dropbox wider, während sie sich in Firefox daran anpasst der Inhalt. Diese Einschränkung erfordert die Erweiterung der Dropbox, um die längste Auswahl aufzunehmen, was zu einer ästhetisch unansehnlichen Webseite führt.

CSS-basierte Lösung für unterschiedliche Breiten

Um dieses Problem zu lösen und Wenn Sie mithilfe von CSS unterschiedliche Breiten für die Dropbox und Dropdown-Liste zulassen, beachten Sie Folgendes:

Die unten beschriebene jQuery-basierte Methode verarbeitet alle Tastatur- und Mausereignisse, einschließlich Klicks:

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

Kombinieren Sie dies Skript mit dem folgenden CSS:

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

Indem Sie die Klasse „wide“ zu den erforderlichen Dropdown-Elementen hinzufügen, können Sie diese Änderungen anwenden. Zum Beispiel:

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

Erkunden Sie eine Live-Demonstration in dieser jsfiddle: [Link]

Das obige ist der detaillierte Inhalt vonWie kann ich die Breite von Dropdown-Listen in verschiedenen Browsern anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!