Pourquoi les listes déroulantes de sélection à largeur fixe tronquent-elles le contenu dans Internet Explorer et comment puis-je y remédier ?

Sélectionnez les listes déroulantes avec une largeur fixe coupant le contenu dans IE

Description du problème :

Quand en utilisant une liste déroulante de sélection avec une largeur fixe, certains éléments peuvent avoir du texte qui dépasse la largeur spécifiée, ce qui entraîne une troncature dans Internet Explorer (IE) navigateurs. Dans IE6 et IE7, la liste déroulante est limitée à la largeur spécifiée, ce qui rend impossible l'affichage du contenu complet des éléments plus longs.

CSS et HTML :

Le à condition que le code CSS et HTML démontre le problème :

select.center_pull {
    width: 145px;
}

<select>

Solution :

IE 8 et supérieur :

Pour IE 8 et supérieur , une solution simple basée sur CSS résout le problème :

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

Cette règle ajuste la largeur du liste déroulante pour accueillir l'élément le plus long lorsque la liste déroulante est ciblée.

IE 7 et versions antérieures :

Malheureusement, IE 7 et versions antérieures ne prennent pas en charge le sélecteur :focus, des techniques supplémentaires sont donc nécessaires pour résoudre la troncature :

• JavaScript : Calculez dynamiquement la largeur de l'élément le plus long et définissez la largeur de la liste déroulante en conséquence à l'aide de JavaScript.
• Hacks CSS : Utilisez des hacks CSS pour forcer une liste déroulante plus large pour IE, comme l'application la largeur : règle automatique avec une priorité plus élevée pour les navigateurs IE en particulier.

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!