更改Font-awesome类在IE11上无法正常工作

debugcn 发表于 Dev

巴特·范德漂移

我在这里有一个跨浏览器的问题。请参阅以下jsfiddle：

这个简短的脚本只是使用fa-spinner和fa-pulse渲染四个加载器图标。然后，在文档加载时，我将类更改为fa-check。

这是HTML：

<i id="i1" class="fa fa-spinner fa-pulse"></i>
<i id="i2" class="fa fa-spinner fa-pulse"></i>
<i id="i3" class="fa fa-spinner fa-pulse"></i>
<i id="i4" class="fa fa-spinner fa-pulse"></i>

这是Javascript：

$(document).ready(function() {
  $('#i4').attr('class', 'fa fa-check');
  $('#i3').attr('class', 'fa fa-check');
  $('#i1').attr('class', 'fa fa-check');
  $('#i2').attr('class', 'fa fa-check');
});

在Firefox和Chrome中一切正常。但是，在IE11中，只有第一个元素可以正确显示，第二个到第四个元素都变为选中标记，但是它们一直在旋转。

看起来由于某种原因，动画没有在IE上停止。

有谁知道为什么会这样，我该如何解决？

编辑：简化版

巴特·范德漂移

现在，我找到了一种解决方法，将图标包装在div中，然后将整个元素替换为带有更新类的新元素。如果有人提出了真正的解决方案，我仍然会接受它作为答案。

新的HTML：

<div id="c1"><i class="fa fa-spinner fa-pulse"></i></div>
<div id="c2"><i class="fa fa-spinner fa-pulse"></i></div>
<div id="c3"><i class="fa fa-spinner fa-pulse"></i></div>
<div id="c4"><i class="fa fa-spinner fa-pulse"></i></div>

新的js：

$(document).ready(function() {
  $('#c4').html('<i class="fa fa-check"></i>');
  $('#c3').html('<i class="fa fa-check"></i>');
  $('#c1').html('<i class="fa fa-check"></i>');
  $('#c2').html('<i class="fa fa-check"></i>');
});

新提琴：

https://jsfiddle.net/utcxvxk0/3/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。