it-swarm.com.de

Einstellen der Höhe eines SELECT in IE

IE scheint die in CSS festgelegte Höhe beim Rendern eines HTML-SELECT zu ignorieren. Gibt es hier Abhilfe oder müssen wir einfach akzeptieren, dass IE nicht so gut aussieht wie andere Browser?

29
Craig

Es gibt keine Lösung für dieses Problem, außer das select-Element abzugrenzen.

22
Ken Browning

Es ist richtig, dass es keine Umgehung dafür gibt, abgesehen von dem Abhaken des select-Elements. Wenn Sie jedoch nur weitere Elemente in Ihrer select-Liste anzeigen möchten, können Sie einfach das size-Attribut verwenden:

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

Auf diese Weise haben Sie zusätzliche leere Zeilen, wenn die Länge der Objektgruppe kleiner als der Größenwert ist.

16
JackNova

sie können eine Kombination aus Schriftgröße und Zeilenhöhe verwenden, um sie zu zwingen, größer zu werden, aber natürlich nur in den Situationen, in denen Sie auch die Schrift größer benötigen

bearbeiten: 

Beispiel -> http://www.bse.co.nz EDIT: (dieser Link ist nicht mehr relevant)

die Auswahl neben dem großen Suchfeld hat die folgenden CSS-Regeln:

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

Ja, du kannst. 

Ich konnte die Höhe meines SELECT genau auf das setzen, was ich in IE8 und 9 wollte. Der Trick besteht darin, die box-sizing-Eigenschaft auf content-box zu setzen. Dadurch wird der Inhaltsbereich von SELECT auf die Höhe festgelegt. Beachten Sie jedoch, dass margin, border und padding nicht in der Breite/Höhe von SELECT berechnet werden. Passen Sie diese Werte daher entsprechend an.

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

Hier ist eine funktionierende jsFiddle . Möchten Sie die entsprechende Antwort bestätigen und markieren? 

5
Joshua

Hierfür gibt es eine Umgehungsmöglichkeit (zumindest für Mehrfachauswahl):

  • set select size -Attribut auf Optionslistengröße (benutze JavaScript oder setze es auf eine ausreichend große Zahl)
  • set select max-height anstelle von height -Attribut auf die gewünschte Höhe (getestet mit IE9)
3
Daimonion

Das Setzen eines CSSheightvalue auf dasselect-Element funktioniert nicht, daspadding-Attribut funktioniert jedoch gut. Wenn Sie einen oberen und einen unteren Abstand einstellen, wird Ihrselect-Element größer.

3
brett

Schließlich in http://viralpatel.net/blogs/2009/09/setting-height-selectbox-combobox-ie.html Eine einfache Lösung (zumindest für IE8) gefunden:

font-size:      1.0em;

BTW, für Google Chrome, fand diese Problemumgehung unter __. Wie standardisiert man die Höhe einer Auswahlbox zwischen Chrome und Firefox? * /

-webkit-appearance: menulist-button;
3
user640811

Verwenden Sie eine UI-Bibliothek wie jquery oder yui , die eine Alternative zum nativen SELECT-Element darstellt, normalerweise als Teil der Implementierung eines Kombinationsfelds.

3
Sparr

Sie können einen Ersatz verwenden: jQuery Chosen . Es sieht ziemlich gut aus.

2
Andres SK
select{
  *zoom: 1.6;
  *font-size: 9px;
}

Wenn Sie Eigenschaften ändern, ändert sich auch die Größe von select im IE7.

2
rostowner

Siehe auch inkonsistentes Boxmodell zwischen Eingabe, Auswahl, ...

1

sie können das, was Facebook tut, ähnlich machen, indem Sie einfach ein paar Füllungen hinzufügen. Es ist nicht so gut, wie man es sich wünschen könnte, sieht aber einigermaßen gut aus.

1
bachstein

ich wollte die Höhe der Auswahlbox so einstellen, dass sie kleiner als die Standardeinstellung ist. ich benutzte

select {
   position: relative;
   height: 10px !important;
   display: inline-block;
}

das funktioniert auf ie7 und ie8. Möglicherweise benötigen Sie nur die height-Eigenschaft. Ich habe nur die position- und display-Eigenschaft hinzugefügt, um Eigenschaften zu überschreiben, die von höher in der Domäne geerbt wurden.

0
mulllhausen

Nicht sicher, aber ich denke, dies war keine Frage nach der Höhe eines Select-Elements vom Typ "multiple", sondern von einem Select-Element vom Dropdown-Typ. Ich bin schon mal aufgetaucht, wenn die Dropdown-Liste gequetscht aussieht und der gewählte Wert nicht eindeutig angezeigt wird. Zweifellos hat es mit den CSS-Stilinformationen zu tun, die auf der Seite verwendet werden. Die einzige Möglichkeit, dies zu stoppen, besteht entweder darin, das CSS zu ändern (was wahrscheinlich die gesamte Seite oder Teile davon in einer Weise beeinflussen würde, die Sie nicht beeinflussen möchten) oder die Style-Informationen im select-Element selbst zu verwenden, um das CSS zu überschreiben, das sie blockiert. Beispiel:

<select name="myselect" id="myselect" style="font-size:15px; height:30px">
<option value="someval">somedescr</option>
...
</select>

Hoffe das hilft.

0
Matt Campbell