Safari 使导航栏在悬停元素时跳转，这在其他浏览器上工作正常

Question

我正在尝试使此导航栏在 Safari 上没有那种“跳跃”效果的情况下工作。 它适用于所有其他浏览器。 问题是悬停在链接上会使栏跳下来。

您可以在此处查看代码 http://jsfiddle.net/kpady8hr/14/

<nav class="top-menu">
<div class="divider first"></div>             
    <a href="#" class="product">
        <span class="hover">Link1</span>
        <span class="link">Link1</span>
    </a>                   
<div class="divider"></div>              
    <a href="#" class="product">
        <span class="hover">Link2</span>
        <span class="link">Link2</span>
    </a>                    
<div class="divider"></div>         
    <a href="#" class="product">
        <span class="hover">Link3</span>
        <span class="link">Link3</span>
    </a>
<div class="divider last"></div>
</nav>

有什么建议吗？

提前致谢:)

Answer 1

您需要使用垂直对齐设置链接样式并在分隔符中进行补偿。 例如：

.top-menu .divider.first {
  background-position: left center; /* change this */
}

.top-menu .product {
  display: inline-block;
  position: relative;
  height: 22px;
  overflow: hidden;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  vertical-align: bottom; /* add this */
}