Pourquoi les listes déroulantes à largeur fixe coupent-elles le contenu dans IE et comment puis-je y remédier ?

Liste déroulante à largeur fixe coupant le contenu dans IE

Dans IE, les listes déroulantes sélectionnées avec une largeur fixe peuvent couper le contenu de ses éléments lorsque la liste est élargie. Ce problème survient car la largeur de la liste déroulante est limitée, ce qui empêche les éléments plus larges de s'afficher entièrement.

CSS de la liste déroulante :

select.center_pull {
    width: 145px;
    /* Other CSS properties... */
}

Contexte du problème :

IE6 et IE7 présentent ce comportement, alors que Firefox ajuste la largeur de la liste déroulante pour s'adapter aux plus longues article. Cependant, l'exigence est de conserver la largeur fixe de la liste déroulante tout en permettant aux éléments plus longs d'être visibles.

Solution pour IE 8 et versions ultérieures :

Pour IE 8 et versions ultérieures, le problème peut être résolu en utilisant CSS :

select:focus {
    width: auto;
    position: relative;
}

En appliquant ce CSS, la largeur de la liste déroulante devient dynamique lorsqu'elle gagne le focus. Cela permet aux éléments de la liste de s'étendre au-delà de la largeur fixe, garantissant ainsi une visibilité totale.

Compatibilité avec les anciennes versions d'IE :

Malheureusement, cette solution n'est pas applicable à IE 7. et les versions antérieures car elles ne prennent pas en charge le sélecteur ":focus".

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!