選擇「箭頭」隱藏在自舉3輸入組中IE9

我具有由引導3定義一組輸入風格下面的HTML：選擇「箭頭」隱藏在自舉3輸入組中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>

這給出了在大多數瀏覽器下面的結果（包括IE10）：

enter image description here

在IE9

然而，「箭頭」的下拉菜單中丟失：

enter image description here

任何人都知道這個在IE9中的修復？

來源

2013-12-09 Øyvind Bråthen

我在這裏發現問題。看起來箭頭按鈕只是隱藏在帶有加號圖標的按鈕下面。所以選擇框是整個寬度，其他按鈕最終覆蓋它。

所以修正是將float:left添加到選擇框中，瞧！

來源

2013-12-09 13:40:41

你搖滾。感謝您發佈您的問題的答案 – Christina

您應該使用.input-group-btn以避免此問題：

<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>

來源

2013-12-09 16:27:01 zessx

你只需要在選擇標籤去除填充。你首先需要IE9的條件類。

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

然後只是簡單地刪除選擇標籤上的填充。

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

來源

2016-08-23 21:50:55

選擇「箭頭」隱藏在自舉3輸入組中IE9

回答

相關問題