Comment résoudre la différence de largeur de liste déroulante entre Internet Explorer et Firefox à l'aide de jQuery ?

Écart de largeur de la liste déroulante IE

Dans Internet Explorer, les listes déroulantes héritent de la largeur de la liste déroulante, tandis que dans Firefox, elles s'ajustent à la liste contenu. Cela peut être problématique, car les boîtes de dépôt doivent être inutilement surdimensionnées pour s'adapter à l'option la plus longue.

Solution CSS

Malheureusement, il n'est pas possible de définir des largeurs différentes pour la boîte de dépôt et la liste déroulante. possible en utilisant CSS seul.

Solution de contournement jQuery

Une solution de contournement utilisant jQuery peut obtenir l'effet souhaité. Cette solution capture divers événements (focus, survol, clic, mouseout, flou) et modifie dynamiquement la classe CSS de la liste déroulante.

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

De plus, le CSS suivant est requis :

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

En attribuant la classe « large » à la liste déroulante, la solution de contournement ajuste sa largeur en conséquence, résolvant ainsi l'écart 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!