【发布时间】：2017-11-22 00:42:18
【问题描述】：
有人知道为什么我的横幅和导航栏之间有间隙吗？这种差距出现在 Edge 和 Chrome 中，但没有出现在 Firefox 中。
我已将所有我能想到的边距减少到 0。这样做消除了 Firefox 中的差距，但没有消除其他浏览器的差距。
我使用 Chrome 和 Edge 的开发人员工具检查了差距，它实际上属于 .wrapper 类。这是.navbar 和.banner 的父级，所以我无法弄清楚是什么导致了它毫无意义的存在！
What it should look like - i.e Firefox
What it looks like in Edge and Chrome
HTML：
{% load cms_tags staticfiles sekizai_tags menu_tags %}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv"X-UA-Compatible" Content = "IE=Edge">
<meta name = "viewport" content="width=device-width", initial-scale=1>
<link rel="icon" href="favicon.ico">
<title>{% block title %}MyBlog Title{% endblock title %}</title>
<link href="{% static 'reset.css' %}" rel="stylesheet">
<link href="{% static 'myblog.css' %}" rel="stylesheet">
<link href="https://cdnjs.cloudfare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel = "stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:700" rel="stylesheet">
<!-- MyBlog custom styles -->
<link href="{% static 'myblog.css' %}" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src=https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
{% render_block "css" %}
</head>
<body>
<div class="wrapper">
<!--<div class="blog-header"></div>-->
<div class ="banner">
<h1 id="logo">Patch's Soapbox </h1>
<!--<img class = "blog-header" src="../../media/images/banner.png">-->
</div>
{% cms_toolbar %}
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<a href=""><img src="{% static '#' %}"/></a>-->
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% show_menu 0 1 0 100 "menu.html" %}
</ul>
</div>
</div>
</nav>
<div class="container-full">
{% block content %}{% endblock content %}
</div>
<div class="push"></div>
</div>
<footer class="footer">
<div class="container-full">
<p class="text-muted">{% block footer %}Patch The Bill© 2015{%endblock footer%}</p>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bu -->
<script src="{% static "ie10-viewport-bug-workaround.js" %}"></script>
{% render_block "js" %}
</body>
</html>
CSS：
html {
position : relative;
min-height: 100%;
margin: 0;
padding: 0;
height: 100%;
}
body {
/* Margin bottom by footer height */
/*margin-bottom: 60px;*/
font-family : Georgia, "Times New Roman", Times, serif;
color: #555;
width: 100%;
height: 100%;
min-height:100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height:100%;
margin-bottom:-60px;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
margin-top: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serfi;
font-weight: normal;
color: #333;
}
.footer,.push {
height:50px;
}
.footer {
position: absolute;
clear:both;
padding-bottom:0;
padding-left : 0px;
bottom: 0;
width: 100%;
min-height: 60px;
height:100%;
background-color: #f5f5f5;
}
footer.footer {
position: relative;
bottom: 0;
width: 100%;
}
.blog-header {
display: block;
width: 100%;
border-style: solid;
/*border-bottom: solid #C6C6C6*/
}
.container-full {
margin: 0 auto;
width: 100%;
padding: 0;
}
.blog-title {
margin-top: 0px;
width: 500px;
margin-bottom: 0;
font-size: 28px;
font-weight: normal;
}
.blog-description{
font-size: 20px;
color: #999;
}
.sidebar-module{
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child{
margin-bottom: 0;
}
.pager {
margin-bottom: 60px;
text-align: left;
}
.pager > li > a {
width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 30px;
}
.blog-post{
margin-bottom: 60px;
}
.blog-post-title{
margin-bottom: 5px;
font-size: 40px;
}
.blog-post-meta {
margin-bottom: 20px;
color : #999;
}
body > container {
padding: 0px 0px 0;
}
.container .text-muted {
margin: 0 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 0;
bottom:0;
}
.row {
margin-right: 0px!important;
}
.navbar { margin-bottom: 0;
margin-top: 0;
padding-top:0
}
.footer { margin-bottom: 0;}
.banner {background-color: green;
min-height: 120px;
padding-bottom:0
}
#logo {
position: relative;
bottom: -50px;
text-align:right;
color:white;
font-family: 'Source Sans Pro', sans-serif;
font-size: 50px
}
【问题讨论】：
-
如果我们有一个可以检查的实时示例，调试起来会容易得多：/ 提供的 HTML 甚至没有编译
-
公平评论。我是新手。你对我如何做到这一点有什么建议吗？暂未上线
-
您可以复制真实的 HTML 输出，或者在某处的服务器上给我们一个指向您的实时页面的链接
标签： html css twitter-bootstrap google-chrome microsoft-edge