jquery - 在 bootstrap 中单击菜单时，菜单向左移动(在 chrome 中大约 20px)

Question

当我点击任何菜单时，我在 bootstrap 中遇到菜单闪烁的问题，它在 chrome 中左侧 10-20px 然后页面加载所以它是什么问题。它在 FIrefox 和 safari 中运行良好，但在 chrome 中无法运行。我没有更改 bootstrap 的任何 css 或 js，所以我共享 bootstrap js 和 css 的 cdn 链接。 我的实时网站的 url 解释如下。

网址:http://cmexpertiseinfotech.com/experttheme/index.html

CSS : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

Js : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

菜单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-transition 更新了问题)

.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
 }

Answer 1

嗯，这种闪烁效果是因为 Google 和其他字体(如果您的网页中有的话)。

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

在您的案例中，默认的网络安全字体占用了更多空间，因此当字体在您的网页上完全下载和更改时，您会看到闪烁的效果。

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