Question

我的导航栏及其链接在页面之间导航时往往表现出一些奇怪的行为。单击链接时，导航项会跳转，闪烁或链接重新排列，然后才能解决问题。进入适当的地方。这种情况发生的次数最多，而且在“我的博客”页面上最差。我认为这可能是我的CSS的问题，但我不完全确定原因是什么。有谁知道如何纠正这种情况？

我的网站是：www.tylercharboneauprofessional.com

这是我的代码：

#navigation-top {
  border-bottom: 4px solid #358fd4;
  opacity: .97;
  padding: 0;
  position: fixed;
  width: 100%;
  z-index: 99999;
  }

.horizontal-navigation-bar nav ul li a { 
   display: inline-block;
   padding: 0 .95em;
   }

body .active-link>a, .text .active-link>a:visited {
  border-bottom: .5px solid #000;
  margin: 0 11px;
  padding: 0 !important;
  }

.horizontal-navigation-bar nav ul li a:after {
   background: transparent;
   content: '';
   display: block;
   height: 1px;
   margin-bottom: -1px;
   transition: width .5s ease, background-color .5s ease;
   width: 0;
   }

.horizontal-navigation-bar nav ul li a:hover:after {
   background: #000;
   width: 100%;
   }

#site-title {
  padding: 0;
  }

感谢您提供的任何帮助！

泰勒

Answer 1

我认为你的transition: width .5s ease, background-color .5s ease;造成了这种情况。你是否试图评论你的部分css，看看是否有一些导致问题？

导航栏和链接在页面之间导航时闪烁/跳转/调整大小，如何修复？

1 个答案: