在我的html中使用时,在chrome中,div渲染得比浏览器的宽度宽(但是没有显示水平滚动条)。在IE(10)和FireFox中,div很好地在NAV下对齐,留下一些左右空间。
已添加2013-01-25:注意!所有浏览器的缩放级别为125%(Ctrl +命中两次)。无论是否使用类容器,IE和Firefox都会重新格式化并重新格式化文本。如果我不使用容器类div,则Chrome仅重新对齐文本并重新格式化。我想使用容器类div,因为它很好地对齐并集中内容。
我无法弄清楚我忘记了什么。 有人有任何想法吗?
(在Windows8上从VS2012运行代码)
以下是我的网页代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" media="screen" />
<style>
body {
padding-top: 42px; /* 60px to make the container go all the way to the bottom of the topbar */
padding-bottom: 42px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" />
<link href="http://twitter.github.com/bootstrap/assets/css/docs.css" rel="stylesheet" />
<link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="http://twitter.github.com/bootstrap/assets/ico/favicon.png">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav- collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/Home/About">NewCo</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li id="Home_Index"><a href="/">Home</a></li>
<li id="Home_Login"><a href="/Home/Login">Login</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Contact</h2>
<address>
<strong>NewCo</strong><br>
</address>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="/Scripts/Bootstrap/bootstrap.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/holder/holder.js"> </script>
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/application.js"> </script>
</body>
</html>