在引导程序中单击菜单时，菜单转到左侧（chrome 中大约 20 像素）答案

【问题标题】：Menu Goes left side (approx 20px in chrome) when click on menu in bootstrap在引导程序中单击菜单时，菜单转到左侧（chrome 中大约 20 像素）
【发布时间】：2016-12-03 18:36:29
【问题描述】：

当我单击任何菜单时，我在引导程序中出现菜单闪烁的问题，它会在 chrome 中左侧 10-20px 然后加载页面，这是什么问题。它在 FIrefox 和 safari 中运行良好，但在 chrome 中却无法运行。我没有更改 bootstrap 的任何 css 或 js，所以我分享了 bootstrap js 和 css 的 cdn 链接。 我的实时网站的网址解释如下。

网址：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
 }

【问题讨论】：

我认为transition 内的.navbar-nav li a:hover, .navbar-nav li.active a 选择器有问题。通过将 transition: all 替换为 transition: color 0.4s ease, background 0.4s ease 等，为您需要的属性应用特定的转换。
@MuhammadUsman 谢谢你的回复。我试过了。首先，我更改了 .navbar-nav li a:hover、.navbar-nav li.active a 的所有转换，然后我也尝试了特定于 webkit 的转换，但它不起作用我已经用 css 更新了我的代码，我已经更改了查看已编辑的问题。
为什么transition 属性值与-webkit 和其他属性值不同？对所有 transition 属性使用相同的值。
我也试过了，但我只用 webkit 更新了问题。即使我也删除了其他转换，但它不起作用
嗯，如果您正在使用任何字体，请禁用 Google 字体和其他字体。可能是字体的问题。第一个浏览器以网络安全字体显示它们，直到字体文件正在下载，当它们完成下载时，它会以占用更少空间的新字体显示它们，并且您会看到闪烁效果。

标签： jquery html css twitter-bootstrap

【解决方案1】：

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

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

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

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

【讨论】：