为什么 IE11 和 Edge 使用 Font Awesome 图标错误地渲染动画？答案

【问题标题】：Why is IE11 and Edge incorrectly rendering animation with Font Awesome icons?为什么 IE11 和 Edge 使用 Font Awesome 图标错误地渲染动画？
【发布时间】：2018-08-21 04:34:20
【问题描述】：

我正在使用最新的 Font Awesome 将 SVG 图像作为图标放置在我的导航栏中。它们应该保持隐藏，直到您将鼠标悬停在导航项上，此时文本滑过并且 SVG 淡入。

这在 Chrome 中运行良好。

在 Internet Explorer 11（在 Windows 7 上）和 Edge（在 Windows 10 上）我都得到了这种奇怪的效果，SVG 出现在视口的顶部并在那里等待直到文本滑动动画完成，此时它扑通一声放在文本旁边。

我已经尝试了各种故障排除方法，但我无法确定这是在做什么，以及为什么。我该如何解决这个渲染问题？

My site

【问题讨论】：

@SuperDJ，我不知道要提供什么代码，因为这是基于 Laravel 的完整站点，而不仅仅是测试代码的 sn-p。我想我可以把它放在一个 codepen 中，但这可能会让它脱离上下文。
codepen.io/koohiisan/pen/LJYzJo，但是codepen拒绝在IE11中加载，所以这似乎没有帮助

标签： css svg internet-explorer-11 font-awesome microsoft-edge

【解决方案1】：

从 .link-container 类中删除 position: relative。
无需使用带有开发工具栏的 IE 11 对其进行测试。
然后它工作正常position: relative 搞砸了位置。

【讨论】：

你拯救了我的一天，谢谢雷蒙德！效果很好！