html - Chrome 和 Safari 之间的 Css 悬停效果不同

Question

我是网站开发新手。

这是 my website 。我发现我的菜单悬停效果在 Chrome 和 Safari 之间存在差异。

之前是对的

谁能帮帮我？

.style-dark-override.menu-transparent:not(.is_stuck) .menu-horizontal-inner > .nav > .menu-smart > li > a:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}

.style-dark-override.menu-transparent:not(.is_stuck) .menu-horizontal-inner > .nav > .menu-smart > li > a:hover:after {
  width: 100%;
  background: #3bc73b;
}

Answer 1

使用 display: table-cell 没有 table 标签作为父亲存在一个长期问题。只是谷歌。我尝试了很多可能的解决方案，但没有一个可行。

您的问题从 col-lg-12 main-menu-container middle 类开始。

我建议你添加

.menu-legend-main li a
    height: 104px

直到你的移动断点，这将解决悬停问题。不是最好的解决方案，但效果很好