问题
I've made a page using Bootstrap. I made a flexible navbar and it looks great in Mozilla.
Whereas when I use Google Chrome, this happens
Why is this? And what is the solution to this?
/* 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>I have a feeling it has something to do with the min-width thing, but I've tried manipulating it and I can't figure it out
回答1:
Include Nicholas Gallagher's normalize CSS file before your other files and it will effectively reset browser preset padding/margin value, allowing them to adopt the same starting point. Do this by adding:
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
in the <head> before your other CSS files.
An alternate solution is to use YUI reset library, instead. Do this by adding:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
in the <head> before your other CSS files.
Either one of them will allow for easier cross-browser compatibility when writing CSS.
EDIT
As was suggested subtly with a downvote, a CSS reset ought to be included. For trouble shooting sake AND to see if one CSS reset may be better, I would try one and then the other. In any event, you'll learn how each helps in greater detail.
That being said, I researched some more and a similar case has been documented as being a Chrome bug (see here: https://superuser.com/questions/803601/text-size-suddenly-got-bigger-on-all-sites-on-google-chrome/803650#803650). Yes, browsers do render differently (not much, but enough to throw a designer off) and resetting CSS have been produced, but also try running your website in Google Chrome Canary. It contains Chrome's newest features. If it runs as intended in Canary, that I would carry on as you were as those changes ought to eventually make their way over to Chrome.
What may also work is adding this to your CSS:
pre,
code,
kbd,
samp,
tt{
font-family:monospace,monospace;
font-size:1em;
}
These are elements that typically default to a monospace type-face in most browsers. The first of the two attributes pertains specifically to webkit based browsers. Let me know if this works.
EDIT 2
Add this to your css and rewrite your classes with their respective font sizes. It's more of a hack and I discourage it, but it could help:
@media screen and (-webkit-min-device-pixel-ratio:0) {
Body or other target {
font-size: some px;
}
}
See if using a web-safe font like arial in both browsers renders different sizes. Sometime custom ones won't work the same.
回答2:
I found it! :)
.navbar-nav {
text-transform: uppercase;
font-weight: 400;
letter-spacing: 0.8px;
}
The letter-spacing was the culprit. Thank you for the help @mijopabe.
来源：https://stackoverflow.com/questions/27382845/bootstrap-3-navbar-cross-browser-issue