Html 导航栏和横幅之间的间隙,但不在Firefox中

Html 导航栏和横幅之间的间隙,但不在Firefox中,html,css,twitter-bootstrap,google-chrome,microsoft-edge,Html,Css,Twitter Bootstrap,Google Chrome,Microsoft Edge,有人知道为什么我的横幅和导航栏之间有差距吗?这一差距出现在Edge和Chrome中,而不是Firefox中 我已经把我能想到的所有利润率都降到了0。这样做消除了Firefox中的漏洞,但没有消除其他浏览器中的漏洞 我使用了Chrome和Edge的开发工具来检查gap,它实际上属于.wrapper类。这是.navbar和.banner的父项,所以我不知道是什么导致了它毫无意义的存在 HTML: 使用-webkit padding before作为顶部填充,使用-webkit padding b

有人知道为什么我的横幅和导航栏之间有差距吗?这一差距出现在Edge和Chrome中,而不是Firefox中

我已经把我能想到的所有利润率都降到了0。这样做消除了Firefox中的漏洞,但没有消除其他浏览器中的漏洞

我使用了Chrome和Edge的开发工具来检查gap,它实际上属于
.wrapper
类。这是
.navbar
.banner
的父项,所以我不知道是什么导致了它毫无意义的存在

HTML:


使用-webkit padding before作为顶部填充,使用-webkit padding before作为底部填充

(顶部)-网络工具包填充之前

(右--webkit填充端

(底部)--网络工具包填充后

(左)-webkit填充开始

请参阅有关浏览器特定黑客的文档

或者可以尝试以下媒体查询:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* rules only apply in saf3+, chrome1+ */
}

如果我们有一个可以检查的实时示例,那么调试就会容易得多:/提供的HTML甚至不是编译的公平评论。我是新手。你对我如何做到这一点有什么建议吗?它目前不在线。你可以复制真实的HTML输出,或者在某个服务器上给我们一个指向您的实时页面的链接
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
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* rules only apply in saf3+, chrome1+ */
}