输入范围在IE中出现两次，但在其他浏览器中出现

Question

我在我的应用程序上有一个输入，用于过滤以下结果。一旦用户输入任何字符，它就会使用angular来过滤结果，但是一个可点击的X，这是一个字体真棒图标，出现在输入内部，以便他们可以这样清除它。在Chrome和Firefox中它工作正常（部署时渲染）但在IE中它出现两次。

铬/火狐：

Internet Explorer：

相关代码是：

<div class="form-group has-feedback"
    style="margin: 0">
  <input type="text"
      ng-model="vm.typeFilter"
      ng-change="vm.updateFilter()"
      class="form-control"
      placeholder="Type"
      style="padding-right:30px;">
  <span ng-if="vm.typeFilter"
      ng-click="vm.typeFilter = ''; vm.updateFilter();"
      class="fa fa-times fa-lg form-control-feedback"
      style="cursor: pointer; pointer-events: all; margin-top: 10px;">
  </span>
</div>

不太确定我正在进行什么，因为我是跨浏览器开发的新手。我试过关闭范围之外的</input>标签，看看是否会有所帮助，但是没有。还尝试在跨度之前关闭输入，但结果相同。

Answer 1

我怀疑这与IE有时提供的默认输入清除功能有关：

::-ms-clear pseudo-element

尝试将fontawesome类更改为其他类，并查看两个图标是否都发生了变化。我认为只有正确的方法才会改变，而左边的则会改变。

如果确实如此，请点击此处查看解决方案：

https://stackoverflow.com/a/14007839/1295183

.has-feedback>input.form-control::-ms-clear {
  display: none;
}