菜單在引導菜單中點擊菜單左側（約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在鉻）

回答

相關問題