html - 元素仅在 Safari 上悬停时移动

Question

我正在尝试解开一个谜。在 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>

https://jsfiddle.net/ykgjsfrh/1/但即使在 Safari 中也能很好地工作......

谢谢你的帮助

Answer 1

您是否尝试过将此添加到 li在你的 css 文件的导航中:

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

我无法通过在浏览器中重新加载来完全测试它。看起来问题可能是每个 <li> 的大小在 Safari 中悬停链接后情况有所不同，但我可能是错的。