引导程序导航宽度在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中显示为不同

回答

相关问题