Comment ajuster la largeur de la liste déroulante dans Internet Explorer ?

Contrôle de la largeur de la liste déroulante IE

Problème :

Dans Internet Explorer (IE ), les listes déroulantes héritent de la largeur de leur zone déroulante parent, ce qui entraîne une apparence lourde lorsque le sélecteur d'option le plus long s'étend au-delà de la largeur de la zone déroulante.

Solution : CSS - et une solution de contournement basée sur JavaScript

Pour surmonter ce problème, une combinaison de CSS et de jQuery peut être utilisée pour définir différentes largeurs pour la liste déroulante et sa liste d'options :

$(document).ready(function() {
  $('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'); });
});

Appliquez le CSS suivant :

select {
  width: 150px; /* or desired width */
}
select.expand {
  width: auto;
}

Attribuez la classe 'wide' aux éléments déroulants concernés :

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

Cette approche garantit que la liste déroulante conserve une largeur fixe tout en permettant à la liste déroulante de s'étendre dynamiquement, s'adaptant au sélecteur disponible le plus long.

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!