Question

我在bootstrap菜单闪烁时出现问题，当我点击任何一个菜单左侧10-20px in chrome 然后页面加载，那么它的问题是什么。它在FIrefox和safari中完美运行，但在 chrome中它不起作用。我没有改变任何css或js的bootstrap，所以我分享了bootstrap js和css的cdn链接。 我的实时网站的网址解释如下。

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

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

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

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

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

菜单在bootstrap中单击菜单时左侧（大约20px镀铬）

1 个答案: