div包裹多选下拉不在IE中工作

Question

我正在尝试使用两个多选下拉菜单构建一个UI add-remove items组件。 fiddle here。

div {
  float: left;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 30px;
  background-color: #e4eaec;
}

div select {
  width: 100%;
  height: 400px;
  overflow: scroll;
  background-color: #fff;
}

div h4 {
  text-align: center;
}

div.section-two-arrows {
  border: none;
  padding-top: 150px;
  background-color: #fff;
  text-align: center;
  .fa {
    font-size: 2.8em;
    display: block;
    padding-bottom: 5px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="add-remove-items-component">
  <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 section-one">
    <h4>Available Functions</h4>
    <select id="avail-functions" class="select-box-style" name="availFunc" multiple>
      <option>Value 1</option>
      <option>Value 2</option>
      <option>Value 3</option>
    </select>
  </div>
  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 section-two-arrows">
    <span class="fa fa-angle-double-right" title="Add All items from Left to Right"></span>
    <span class="fa fa-angle-right" title="Add selected items from Left to Right"></span>
    <span class="fa fa-angle-left" title="Add All items from Right to Left"></span>
    <span class="fa fa-angle-double-left" title="Add selected items from Right to Left"></span>
  </div>
  <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 section-three">
    <h4>Selected Functions</h4>
    <select id="sel-functions" class="select-box-style" name="selFunc" multiple>
      <option>Value 1</option>
      <option>Value 2</option>
      <option>Value 3</option>
    </select>
  </div>
</div>

此组件适用于chrome，但不适用于IE。

IE的问题是第一个选择框不起作用，但第二个选择框工作正常。

如果我删除包裹在选择框中的div，它可以正常工作。但我无法使其响应，并且页面的对齐将受到干扰。