Question

我有以下由bootstrap 3设计的html，它定义了一组输入：

<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中修复此问题吗？

Answer 1

我在这里发现了这个问题。看起来箭头按钮只是隐藏在带有加号图标的按钮下方。因此，选择框是整个宽度，其他按钮最终覆盖它。

所以修复是将float:left添加到选择框，瞧！

Answer 2

您应该使用.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>

Answer 3

您只需要删除select标记上的填充。你首先需要IE9的条件类。

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

然后只需删除选择标记上的填充。

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

在IE9中选择隐藏在bootstrap 3输入组中的“箭头”

3 个答案: