Html 元素仅在Safari上悬停移动

我想解开一个谜。在chrome上一切都很好，但在Safari中，当我胡佛时，一些元素用红色圈起来，它们移动了一点

这只发生在第一个胡佛。第二次你这么做的时候什么都没发生

我试图在这里再现这种情况：

<nav class="cd-secondary-nav">
  <ul class="has-magic-line">
    <li id="all-events" class="active"><a>Tous</a></li>
    <li id="week-events" class=""><a>Semaine</a></li>
    <li id="weekend-events" class=""><a>Week-end</a></li>
    <li id="recent-events" class="" style="position: relative;"><a>Nouveaux</a></li>
    <li class="magic-line" style="transform: translateX(103.844px) scaleX(73.75);"></li>
  </ul>
</nav>

但即使在狩猎中，它也能很好地工作

---

感谢您的帮助

您是否尝试将此添加到css文件中nav内的li中：

li {
  height: 100%;
  text-align: center;
  width: 100%;
}

---

在浏览器中重新加载时，我无法完全测试这一点。看起来问题可能是在Safari中悬停链接后，每个链接的大小不同，但我可能错了。

为了让我们更好地帮助您，请更新您的问题，以便在问题本身的a中显示所有相关代码，而不是简单地链接到你的网站，这可能会被过滤器或抗病毒程序阻止。问题是我试图在JSFIDLE中复制它，但我不能：/