更改字体真棒 class 在 IE11 上无法正常工作

Question

我遇到了跨浏览器问题。请参阅以下 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 上没有停止。

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

编辑：简化版

Answer 1

您的 fiddle 在我的 IE 版本 11 上运行良好。

我会尝试：

确保没有打开任何兼容性设置
在 IE 上推送更新
重置 IE - 单击右上角的设置齿轮，然后 select 互联网选项。单击高级选项卡，然后单击重置。这将清除所有缓存和临时文件

Answer 2

现在我找到了一个解决方法，将图标包装在 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>');
});

新 fiddle:

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

更改字体真棒 class 在 IE11 上无法正常工作

Changing font-awesome class not working correctly on IE11

jquery

font-awesome