引导3 - 的NavBar跨浏览器的问题(Bootstrap 3 - NavBar Cross-b

我用引导了一个页面。我做了一个灵活的导航栏，它在Mozilla看起来很大。

而当我使用谷歌Chrome，这种情况

为什么是这样？什么是解决这个？

 /* bootstrap 3 helpers */ .navbar-form input, .form-inline input { width: auto; position: absolute; } #nav.affix { position: fixed; top: 0; width: 100%; z-index: 10; } /* Create a medium height at 40px */ .navbar-md { min-height: 40px } .navbar-md .navbar-brand, .navbar-md .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px } .navbar-md .navbar-brand { height: 40px } .navbar-md .navbar-toggle { margin: 6px 12px 6px 0px; padding: 6px 7px 6px 7px; } .navbar-md .navbar-toggle .icon-bar { width: 19px; } .container#slider { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .container-full#headerC { padding: 15px; background-color: #8F1925; margin-top: 0px; } /* RESPONSIVE HEADER*/ .navbar-header { background-image: url("bootstraplogo.png", "bootstraplogoslice1.png") background-repeat: no-repeat, repeat-x; background-position: center; } @media only screen and (min-width: 479px) and (max-width: 991px) { .navbar-header { background-size: auto auto; } .navbar-header { height: 45px; } } @media only screen and (max-width: 479px) { .navbar-header { background-size: auto 50px, 1px 50px; } .navbar-md#header { height: 50px; } } /* RESPONSIVE HEADER*/ .container-header { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } .text-center { } p#headerP { display: inherit; padding: 30px 0 10px; text-align: center; text-shadow: 1px 1px 2px #76141D; font-family: "Josefin Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 5em; font-weight: 700; line-height: normal; color: #fff; } p#subheader { display: inherit; margin: 0; padding: 0 0 40px; text-align: center; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); text-transform: uppercase; font-size: 1.25em; font-weight: 400; letter-spacing: 3px; color: #E72635; } .p img { float: left; width: 100px; height: 100px; background: #555; } /* */ /* Custom container */ .container-full { margin: 0 auto; width: 100%; }

 <head> <title>The University Digest</title> <!-- Bootstrap Core CSS --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="css/business-casual.css" rel="stylesheet"> <link href="css/menu.css" rel="stylesheet"> <!-- Fonts --> <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> <div class="container-full" id="headerC"> <header class="masthead"> <p id="headerP">The University Digest</p> <p id="subheader">The Official Student Publication of Western Mindanao State University</p> </header> </div> <!-- Navigation --> <div id="nav"> <div class=" navbar-custom navbar navbar-inverse navbar-md"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand " href="#">Menu</a> </div> <div class="navbar-collapse collapse navbar-inverse-collapse navbar-md"> <ul class="nav navbar-nav "> <li><a href="#">Home</a> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Articles <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Article</a> </li> <li><a href="#">Comics</a> </li> <li><a href="#">Editorial Cartoon</a> </li> <li><a href="#">Uncensored</a> </li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Publications<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Newsletters</a> </li> <li><a href="#">Magazine</a> </li> <li><a href="#">Tejido</a> </li> </ul> <li><a href="#">Applications</a> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">The Staff<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Editorial Board</a> </li> <li><a href="#">By-Laws</a> </li> <li><a href="#">Contacts</a> </li> </ul> <li><a href="#">WMSU Portal</a> </li> <li><a href="#">Log In</a> </li> </li> </ul> </ul> </div> </div> </div>

我有这事做与最小宽度的东西的感觉，但我已经试过操纵它，我无法弄清楚

Answer 1:

包括尼古拉斯·加拉格尔的正常化您的其他文件之前CSS文件，它会有效地重置浏览器预置填充/保证金价值，使他们能够采用相同的起点。通过将这样做：

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">

在<head>之前，你的其他CSS文件。

另一种解决方案是使用锐复位库，来代替。通过将这样做：

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

在<head>之前，你的其他CSS文件。

无论是他们中的一个写CSS的时候将允许更容易跨浏览器的兼容性。

编辑

作为用downvote巧妙地暗示，一个CSS复位应该被包括在内。对于故障排除着想，看看是否一个CSS复位可能会更好，我会尝试一个，然后其他。在任何情况下，您将学习如何在更详细的每个帮助。

话虽这么说，我研究了一些和一个类似的案件已被记录为Chrome错误（在这里看到： https://superuser.com/questions/803601/text-size-suddenly-got-bigger-on-all-网站上，谷歌铬/ 803650＃803650 ）。是的，浏览器会呈现不同的（不多，但足以抛出一个设计师关）和CSS复位已经产生，而且还尝试运行在您的网站谷歌的Chrome Canary 。它包含了Chrome的最新功能。如果它运行按预期在加纳利，我会继续为你的这些变化应该最终使他们的方式在Chrome浏览器。

什么也可以工作，是增加给你的CSS：

pre,
code,
kbd,
samp,
tt{
  font-family:monospace,monospace;
  font-size:1em;
}

这些是通常默认为等宽型脸在大多数浏览器元素。所述第一的两个属性的具体涉及基于WebKit浏览器。让我知道这个是否奏效。

编辑2

添加到您的CSS和各自的字体大小重写你的类。它更像是一个黑客，我劝阻，但它可以帮助：

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  Body or other target {
    font-size: some px;      
  }
}

看看在这两种浏览器中使用一个网络安全的字体如Arial呈现不同的尺寸。有时自定义的将无法正常工作一样。

Answer 2:

我找到了！ :)

.navbar-nav {
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.8px;
}

该字母间距是罪魁祸首。谢谢你的帮助@mijopabe。