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

Question

我正在使用最新的“真棒字体”将SVG图像作为图标放置在导航栏中。在您将鼠标悬停在导航项目上之前，它们应该保持隐藏状态，此时文本滑过，SVG淡入。

这在Chrome中正常运行。

在Internet Explorer 11（在Windows 7上）和Edge（在Windows 10上）上，我都得到了这种奇怪的效果，其中SVG出现在视口的顶部，并在那里等待，直到文本滑动动画结束，此时排在文本旁边。

我已经尝试过各种故障排除方法，但我只是无法确定这样做的原因以及原因。如何解决此渲染问题？

My site

Answer 1

从类position: relative中删除.link-container。
不需要使用带有开发工具栏的IE 11对其进行测试。
这样就可以正常工作了position: relative弄乱了职位。