un moyen de savoir si les options ne correspondent pas à un IE

Question

Dans IE6, et éventuellement 7, si vous définissez la largeur d'un à une valeur autre que auto, si les options à l'intérieur de cette sélection sont plus larges alors la largeur du select, ils sont coupés. c'est mauvais. Firefox est assez intelligent pour ne pas le faire.

Question: Comment puis-je savoir si les options sont coupées avec javascript?

Comment avez-vous résolu ce problème autrement qu'en définissant la largeur sur auto?

Answer 1

Bonne question. Un peu d'une diatribe ici, mais la mise en œuvre de contrôles <select> IE est abyssale. Il a les problèmes suivants (entre autres, je suis sûr):

• (Comme vous l'avez remarqué) le réglage de la largeur sur les <select> coupes hors <option> éléments, quelle que soit overflow instructions
• ils ont cette magic ability to sit overtop of all other controls on the page, quelle que soit la position et les instructions de stratification (z-index). C'était un énorme PITA pour les premiers développeurs de widgets "dialog"; toutes les listes déroulantes derrière le dialogue dépasseraient par-dessus le dialogue lui-même.
• you cannot disable individual <option> elements
• you cannot hide/show individual <option> elements
• le <select> ne reflète pas les styles css fixés sur le sélectionné <option>
• can't set the innerHTML property to a string of new option items
• si vous ne pas définir un attribut value sur chaque <option>, mySelectBox.value échoue silencieusement
• lorsque vous utilisez les flèches du clavier pour naviguer dans la liste des <option> éléments, les change événement se déclenche sur chaque combinaison de touches (Opera a ce problème aussi)
• styles CSS sur <option> s et <optgroup> s sont généralement complètement ignorés (only backgound-color and color work)
• programme modifiant la liste des options se cache dans le menu déroulant (ce suce pour "taper en avant" les tentatives de mise en œuvre qui veulent que la liste déroulante reste visible)
• IE7 tente d'adapter toutes les options sur l'écran lorsqu'il est affiché. Pour les grandes listes cela signifie que le contenu déroulant siégera overtop du dropdow quand montré (ce en soi n'est pas mal, mais il est incompatible avec les autres versions IE)

En ce qui concerne votre problème, une solution consiste à basculer le width-"auto" lorsque les options sont présentées et réglées si retour à une largeur de jeu lorsque les options sont fermées, comme indiqué ici: http://css-tricks.com/select-cuts-off-options-in-ie-fix/

l'inconvénient évident est que les vis le flux du document les éléments voisins se déplacent tous pour tenir compte du paramètre width:auto.

Answer 2

Jetez un oeil à this post par Chris Coyier.