Comment gérer les incohérences de largeur de liste déroulante dans Internet Explorer ?

Comment ajuster la largeur des listes déroulantes dans IE

Dans Internet Explorer, les listes déroulantes héritent de la largeur de leurs boîtes de dépôt associées. Cependant, dans d'autres navigateurs comme Firefox, la largeur de la liste s'adapte au contenu, créant des incohérences dans l'apparence. Cela peut entraîner un espace excessif dans les pages si la largeur de la boîte de dépôt est étendue pour accueillir l'élément le plus long.

Pour résoudre ce problème, l'utilisation de jQuery et CSS peut fournir une solution de contournement. Le code jQuery ci-dessous gère divers événements pour modifier la largeur de la liste déroulante, notamment le focus, le survol, la sortie de la souris, les clics et le flou :

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

Complétez ce code jQuery avec le CSS suivant :

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

Ce CSS définit une largeur fixe pour les dropbox, vous permettant de spécifier la largeur souhaitée, par exemple 150 pixels. Lorsque la liste déroulante se développe, la classe « expand » est appliquée, remplaçant la largeur fixe par une largeur calculée automatiquement en fonction du contenu.

Pour utiliser cette solution, ajoutez simplement la classe « large » au champ concerné. Éléments déroulants :

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

Cette approche garantit une largeur uniforme dans tous les navigateurs tout en permettant à la liste déroulante de s'étendre et de se contracter selon les besoins, résolvant ainsi le problème d'héritage de largeur spécifique à IE.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!