6

Ich habe folgenden html gestylt von 3 Bootstrap, die eine Gruppe von Eingaben definiert:in Bootstrap-3 Eingangsgruppe in IE9

<div class="input-group"> 
    <select class="form-control" >Some options here</select> 
    <a class="btn btn-default input-group-addon disabled" title="Legg til" disabled="" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a> 
</div> 

Dies ergibt folgendes Ergebnis in den meisten Browsern (einschließlich IE10) :

enter image description here

jedoch in IE9, der "Pfeil" für die Dropdown fehlt:

enter image description here

Wer kennt das im IE9?

Antwort

4

Ich habe das Problem hier gefunden. Es scheint, dass die Pfeiltaste einfach unter der Schaltfläche mit dem Plus-Symbol versteckt ist. Die Auswahlbox ist also die gesamte Breite, und die anderen Tasten überlagern sich.

Also die Lösung war float:left in die Auswahlbox hinzuzufügen, und voila!

+0

Sie rocken. Danke, dass du deine Antwort auf deine Frage geschrieben hast – Christina

0

Sie sollten .input-group-btn, um dieses Problem zu vermeiden:

<div class="container"> 
    <form role="form"> 
    <div class="form-group"> 
     <div class="input-group"> 
     <select class="form-control"> 
      <option>1</option> 
      <option>2</option> 
      <option>3</option> 
      <option>4</option> 
      <option>5</option> 
     </select> 
     <span class="input-group-btn"> 
      <a class="btn btn-default" href="#"><i class="glyphicon glyphicon-plus-sign"></i></a> 
     </span> 
     </div> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
</div> 
0

Sie müssen nur padding auf dem select-Tag entfernen. Sie benötigen zunächst bedingte Klassen für IE9.

<!--[if IE 9 ]><html class="ie9"><![endif]--> 

Dann einfach entfernen Sie die Polsterung auf die Auswahl Tags.

.ie9{ 
    select.form-control{ 
    padding: 0 !important;  
    } 
}