Définition de la hauteur d'un SELECT dans IE

Question

IE semble ignorer la hauteur définie en CSS lors du rendu d'un HTML SELECT. Existe-t-il des solutions pour cela ou devons-nous simplement accepter qu'IE ne sera pas aussi bon que les autres navigateurs?

Answer 1

Il n'y a pas de solution pour cela à part abandonner l'élément select .

Answer 2

Il est vrai qu'il n'y a pas de solution pour cela à part abandonner l'élément select, mais si vous avez seulement besoin d'afficher plus d'éléments dans votre liste de sélection, vous pouvez simplement utiliser l'attribut size:

 <select multiple="multiple" size="15">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
 

En faisant cela, vous aurez des lignes vides supplémentaires si la longueur de votre collection d'articles est inférieure à la valeur de taille.

Answer 3

vous pouvez utiliser une combinaison de taille de police et de hauteur de ligne pour la forcer à s'agrandir, mais évidemment uniquement dans les situations où vous avez également besoin d'une police plus grande

Éditer:

Exemple -> http://www.bse.co.nz EDIT: (ce lien n'est plus pertinent)

la sélection à côté de la grande boîte de recherche a les règles css suivantes:

 #navigation #search .locationDrop {
    font-size:2em;
    line-height:27px;
    display:block;
    float:left;
    height:27px;
    width:200px;
}
 

Answer 4

Oui, vous le pouvez.

J'ai été en mesure de régler la hauteur de mes SELECT exactement ce que je voulais dans IE8 et 9. Le truc est de mettre la box-sizing de la propriété d' content-box. Cela permettra de définir la zone de contenu de l' SELECT à la hauteur, mais gardez à l'esprit que margin, border et padding valeurs ne seront pas calculés dans la largeur/hauteur de l' SELECT, afin d'ajuster les valeurs en conséquence.

select {
    display: block;
    padding: 6px 4px;
    -moz-box-sizing: content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    height: 15px;
}

Ici, c'est un travail jsFiddle. Auriez-vous l'esprit en confirmant et en marquant la réponse appropriée?

Answer 5

Utilisez une bibliothèque d'interface utilisateur, comme jquery ou yui , qui fournit une alternative à l'élément SELECT natif, généralement dans le cadre de l'implémentation d'une zone de liste déroulante.