菜单在引导菜单中点击菜单左侧（约20px在铬）

我在自举菜单闪烁时出现问题，当我点击其中的任何菜单时左侧10-20px在铬然后页加载所以它有什么问题。它在FIREfox和Safari浏览器中完美运行，但在铬无法正常工作。我没有更改任何引导程序的CSS或JS，所以我共享bootstrap js和CSS的CDN链接。 我的生活网站的网址解释如下。菜单在引导菜单中点击菜单左侧（约20px在铬）

HTML菜单代码：

<nav id="navbar-main" class="navbar navbar-default navbar-fixed-top navbar-mi"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span>       
     </button> 
     <a class="navbar-brand padd_btm" href="index.html"><img src="images/logo.png"/></a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="theme.html">Themes</a></li> 
     <li><a href="service.html">Service</a></li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="support.html">Support</a></li> 
     <li><a href="contact.html">Contact</a></li> 
     <li><a href="#" class="cyan" data-toggle="modal" data-target="#myModal"><i class="fa fa-fw" title="Copy to use lock" aria-hidden="true"></i>Login</a></li> 
     </ul> 
    </div> 
    </div> 
</nav>

编辑：

度CSS支持的变化过渡的（我也试过在所有的过渡变化，但我已经更新只与WebKit的过渡问题）

.navbar-nav li a:hover, .navbar-nav li.active a 
{ 
      color: #fff !important; 
      background-color: #158fa1 !important;border-radius: 5px; 
      -webkit-transition: color 0.4s ease, background 0.4s ease; 
      -o-transition: all .4s ease-in-out; 
      transition: all .4s ease-in-out 
}

来源

2016-07-29 Bhavin

我觉得'transition'里面'.navbar-nav li a：hover，.navbar-nav li.active a'选择器是问题。通过将'transition：all'替换为'transition：彩色0.4s缓动，背景0.4s缓动'等来为您需要的属性应用特定转换。 –

@MuhammadUsman感谢您的答复。我试过了。首先我改变了.navbar-nav li a：hover，.navbar-nav li.active a的所有转换，然后我也尝试了特别针对webkit，但它不工作我已更新我的代码与CSS我有变化请看到编辑的问题。 – Bhavin

为什么'-webkit'等'transition属性值不同？对所有'transition'属性使用相同的值。 –

嗯，这闪烁效果是因为谷歌和其他字体，如果有任何在你的网页上。

当您的页面加载时，浏览器使用默认的网页安全字体来显示您的内容。同时它开始从Google和其他服务器下载字体。每种字体都有自己的特征，即每种字符的宽度和高度在不同的字体中是不同的。

在您的情况下，默认的网页安全字体会占用更多空间，因此当您的网页上的字体完全下载并更改时，您会看到闪烁的效果。

要解决此问题，您可以使用预加载器，该预加载器将可见，直到您的所有文件都完全下载并且您的网页完全准备好给用户。

来源

2016-07-29 07:47:46

菜单在引导菜单中点击菜单左侧（约20px在铬）

回答

相关问题