引導程序導航寬度在Chrome中顯示爲不同

我已經搜索了大量文章，嘗試修復這個問題並沒有運氣。希望看看我是否有解決方案我正在我們公司的網站上進行監督。引導程序導航寬度在Chrome中顯示爲不同

問題：我在FireFox中開發，一旦完成了該網站的測試版本，我在Chrome中查看時發現了一個錯誤。問題是Chrome瀏覽器& IE中的導航欄更短，在FF和Safari中看起來很完美。以下是本節的HTML和CSS。如果單擊圖像鏈接，您可以在屏幕上看到顯示方式的差異。提前感謝您的任何見解！

Navigation Bar Issue

CSS 
.navigation { 
min-height: 50px; 
} 

.navigation .navbar { 
border: none; 
margin-bottom: 0; 
min-height: 50px; 
} 
.navigation .navbar .navbar-brand { 
color: #fff; 
font-size: 40px; 
font-weight: 700; 
height: 70px; 
line-height: 35px; 
} 
.navigation .navbar-default { 
background-color: #0091D5; 
box-shadow: 0 0px 10px rgba(0,0,0,.2); 
border: none; 
border-radius: 0; 
clear: both; 
} 
.navigation .navbar-default .navbar-nav>li>a { 
color: #fff; 
font-weight: 700; 
padding-top: 15px; 
padding-bottom: 15px; 
} 

.navigation .navbar-default .navbar-nav>li>a:hover, 
.navigation .navbar-default .navbar-nav>.active>a, 
.navigation .navbar-default .navbar-nav>.active>a:hover, 
.navigation .navbar-default .navbar-nav>.active>a:focus { 
background: #FF7200; 
color: #FFFFFF; 
} 
.navigation .btn-default:hover, 
.navigation .btn-default:focus, 
.navigation .btn-default:active, 
.navigation .btn-default.active { 
border-color: transparent; 

} 

HTML 
    <section id="menu"> 
    <div class="navigation"> 
    <div id="main-nav" class="navbar navbar-default" role="navigation"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 

     </div> <!-- end .navbar-header --> 
     <div class="navbar-collapse collapse"> 
      <ul id="ulnav" class="nav navbar-nav"> 
      <li>&nbsp;</li> 
     <li><a href="index.html" target="_parent">&nbsp;Home</a></li> 
      <li><a href="water-damage.html" target="_parent">Water Damage</a></li> 
      <li><a href="fire-damage.html" target="_parent">Fire</a></li> 
      <li><a href="drying-services.html" target="_parent">Drying Services</a></li> 
      <li><a href="restoration.html" target="_parent">Restoration</a></li> 
      <li><a href="commercial.html" target="_parent">Commercial</a></li> 
      <li><a href="reviews.html" target="_parent">Reviews</a></li> 
      <li><a href="insurance-financing.html" target="_parent">Insurance & Financing</a></li> 
      <li><a href="about.html" target="_parent">About</a></li> 
      <li class="cwaf-bg"><a href="free-estimate.html" target="_parent">Free Estimate</a></li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    </div> 
</section>

來源

2017-10-05 sb-cwaf

只要盡你片段注入codepen，它是在Chrome或Opera沒有問題。他們都使用WebKit的發動機

確保您的其他樣式（全局樣式）沒有給出一個效果，您的導航

來源

2017-10-09 08:39:32 Yoman

謝謝！我們最終重新編程導航。感謝您的答覆！ –

引導程序導航寬度在Chrome中顯示爲不同

回答

相關問題