输入跨度在 IE 中出现两次，但在其他浏览器中没有出现

Question

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

Chrome/Firefox:

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 class 更改为其他字体，看看两个图标是否都发生了变化。我觉得只有右边会变，左边的还是十字。

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

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

输入跨度在 IE 中出现两次，但在其他浏览器中没有出现

Input span appearing twice in IE but not other browsers

html

internet-explorer

cross-browser