Bootstrap 3 - NavBar跨浏览器问题 [英] Bootstrap 3 - NavBar Cross-browser issue
本文介绍了Bootstrap 3 - NavBar跨浏览器问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用Bootstrap创建了一个页面。我做了一个灵活的navbar，它看起来伟大的Mozilla。
I've made a page using Bootstrap. I made a flexible navbar and it looks great in Mozilla.
当我使用Google Chrome时，会发生这种情况
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>
我有一种感觉
推荐答案
我找到了它！ ：）
.navbar-nav {
text-transform: uppercase;
font-weight: 400;
letter-spacing: 0.8px;
}
字母间距是罪魁祸首。感谢您的帮助@mijopabe。
The letter-spacing was the culprit. Thank you for the help @mijopabe.
这篇关于Bootstrap 3 - NavBar跨浏览器问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
