更改字体真棒 class 在 IE11 上无法正常工作
Changing font-awesome class not working correctly on IE11
我遇到了跨浏览器问题。请参阅以下 jsfiddle:
https://jsfiddle.net/utcxvxk0/1/
这个简短的脚本只是使用 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 上没有停止。
有谁知道为什么会这样,我该如何解决?
编辑:简化版
您的 fiddle 在我的 IE 版本 11 上运行良好。
我会尝试:
- 确保没有打开任何兼容性设置
- 在 IE 上推送更新
- 重置 IE - 单击右上角的设置齿轮,然后 select
互联网选项。单击高级选项卡,然后单击重置。这将清除所有缓存和临时文件
现在我找到了一个解决方法,将图标包装在 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:
我遇到了跨浏览器问题。请参阅以下 jsfiddle:
https://jsfiddle.net/utcxvxk0/1/
这个简短的脚本只是使用 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 上没有停止。
有谁知道为什么会这样,我该如何解决?
编辑:简化版
您的 fiddle 在我的 IE 版本 11 上运行良好。
我会尝试:
- 确保没有打开任何兼容性设置
- 在 IE 上推送更新
- 重置 IE - 单击右上角的设置齿轮,然后 select 互联网选项。单击高级选项卡,然后单击重置。这将清除所有缓存和临时文件
现在我找到了一个解决方法,将图标包装在 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: