Chromeでブートストラップナビの幅が異なって表示される

Question

私はこの問題の修正を試して、ここ数多くの記事を検索しました。このための修正があるかどうかを確認したいと思っています。私は会社のサイトで監督しています。

問題：FireFoxで開発していて、かつてはサイトのベータ版を使用していましたが、Chromeで表示するとバグが見つかりました。問題は、Chromeの& IEでnavバーが短く、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> 

Answer 1

だけcodepenにあなたのスニペットをしてみてください、そして、それはクロムやOperaで問題ありません。それらの両方は、エンジンとしてWebKitのを使用

をあなたの他のスタイル（グローバルスタイル）は、あなたのナビゲーションに