IE9列表间距问题

Question

我有一个在IE10 +，Chrome等中正确显示的锚链接列表，但IE9在不应该存在的元素之间添加填充。

这就是它在IE10 / Chrome中的外观：

但是IE9错误地渲染了链接：

HTML

<div class="jump-to-links">
  <ul class="list-group">
    <li>
      <a href="#">Link Title</a><i class="material-icons arrow-down">keyboard_arrow_down</i>
    </li>
    <li>
      <a href="#">Link Title</a><i class="material-icons arrow-down">keyboard_arrow_down</i>
    </li>
    <li>
      <a href="#">Link Title</a><i class="material-icons arrow-down">keyboard_arrow_down</i>
    </li>
    <li>
      <a href="#">Link Title</a><i class="material-icons arrow-down">keyboard_arrow_down</i>
    </li>
  </ul>
</div>

CSS

// TARGETING EI9+
@media screen and (min-width: 0\0) {
  .jump-to-links{
    ul{
      white-space: nowrap;
    }
    ul li{
      padding: 0;
      margin: 0;
    }
  }
}

.jump-to-links {
  text-align: center;
  a,a:hover {
    text-decoration: none;
    color: $black;
    font-weight: bold;
    display: inline-block;
  }
  ul li {
    display: inline-block;
    padding: 0px 60px 0px 0px;
  }
  li {
    cursor: pointer;
  }
  .arrow-down {
    display: block;
  }
}

/***************** DESKTOP **************/
@media (min-width: $screen-lg-min) {
  .jump-to-links{
    a{
      font-size: 17px;
    }
    .arrow-down{
      color: $purple;
    }
  }
}


/***************** TABLET **************/
@media (min-width: $screen-sm-min) and (max-width: $screen-lg-min) {
  .jump-to-links{
    text-align: left;
    ul li{
      display: block;
      padding: 10px 30px;
      border-bottom: 1px solid $accordion-border;
    }
    .arrow-down{
      float: right;
      color: $purple;
    }
  }
}

/****************** MOBILE ***************/
@media (max-width: $screen-xs-max) {
  .jump-to-links{
    padding: 0px 0px 0px 0px;
    text-align: left;
    ul li{
      display: block;
      padding: 10px 30px;
      border-bottom: 1px solid $accordion-border;
    }
    .arrow-down{
      float: right;
      color: $purple;
    }
  }
}

在IE9中呈现CSS：