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

你的小提琴在IE 11版本上运行良好。

我会尝试：

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

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>');
});

新小提琴：

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

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

2 个答案: