输入跨度在 IE 中出现两次，但在其他浏览器中不出现答案

【问题标题】：Input span appearing twice in IE but not other browsers输入跨度在 IE 中出现两次，但在其他浏览器中不出现
【发布时间】：2017-05-07 08:22:45
【问题描述】：

我的应用程序中有一个用于过滤以下结果的输入。一旦用户输入任何字符，它就会使用 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> 标记，看看是否有帮助，但没有。还尝试在跨度之前关闭输入，但结果相同。

【问题讨论】：

标签： html internet-explorer cross-browser

【解决方案1】：

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

::-ms-clear pseudo-element

尝试将 fontawesome 类更改为其他内容，看看两个图标是否都发生了变化。我认为只有右边会改变，而左边会保持十字架。

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

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

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

【讨论】：

很好的发现。我不使用 IE，所以我从来不知道这是一件事。我将fa-times 更改为fa-plus，而另一个x 仍然存在。所以如果我使用上面的css，我应该将该类应用于输入？
是的，应该将伪元素选择器应用于输入。只是为了确保 X 仅对具有引导程序添加的图标的输入隐藏，我使用正确的选择器修改了我的答案。