Bootstrap 3 - NavBar跨浏览器问题

时间：2014-12-09 15:36:25

标签： html css twitter-bootstrap cross-browser

我使用Bootstrap创建了一个页面。我制作了一个灵活的导航栏，它在Mozilla看起来很棒。 enter image description here

当我使用谷歌浏览器时，会发生这种情况

enter image description here

这是为什么？这是什么解决方案？

＆＃13;
＆＃13; 
/* 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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我觉得它与最小宽度的东西有关，但我已经尝试过操纵它而我无法弄清楚

2 个答案:

答案 0 :(得分：1)

在其他文件之前加入Nicholas Gallagher's normalize CSS文件，它将有效地重置浏览器预设填充/边距值，允许它们采用相同的起点。通过添加：

来做到这一点 
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
在其他CSS文件之前的<head>中

。

另一种解决方案是使用YUI reset library。通过添加：

来做到这一点 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
在其他CSS文件之前的<head>中

。

在编写CSS时，其中任何一个都将允许更容易的跨浏览器兼容性。

修改

正如暗示的暗示，应该包括CSS重置。为了解决问题并且看看一个CSS重置可能更好，我会尝试一个然后另一个。无论如何，您将了解每个人如何更详细地帮助。

话虽如此，我进行了更多研究，并且类似的案例被记录为Chrome错误（请参阅此处：https://superuser.com/questions/803601/text-size-suddenly-got-bigger-on-all-sites-on-google-chrome/803650#803650）。是的，浏览器确实以不同的方式呈现（不多，但足以让设计师关闭）并且已经生成了重置CSS，但也尝试在Google Chrome Canary中运行您的网站。它包含Chrome的最新功能。如果它按照Canary中的预期运行，那么我将继续保持原样，因为这些更改最终应该转移到Chrome。

将CSS添加到您的CSS中也可能有用：

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

这些元素在大多数浏览器中通常默认为等宽字体。这两个属性中的第一个特别适用于基于webkit的浏览器。如果有效，请告诉我。

编辑2

将此添加到您的css并使用各自的字体大小重写您的类。它更像是一个 hack ，我不鼓励它，但它可以帮助：

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

在两种浏览器中查看是否使用像arial这样的Web安全字体呈现不同的大小。有时自定义的不会起作用。

答案 1 :(得分：0)

我找到了！ ：）

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

字母间距是罪魁祸首。感谢您帮助@mijopabe。

相关问题
最新问题