我有一个使用position: relative;和top: -52px向上移动的元素（菜单）。但是我希望它下面的所有内容也都向上移动，所以我在菜单中添加了一个负底边距。这在Chrome / Safari中运行良好，但在Firefox中，下面的内容并没有提升。 （在IE9中也有同样的问题，现在无法访问更高版本。）
编辑：测试用例，尽可能减少：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<style>
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a{background-color:transparent}
a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:700}
dfn{font-style:italic}
h1{margin:.67em 0;font-size:2em}
mark{color:#000;background:#ff0}
small{font-size:80%}
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:1em 40px}
hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}
button{overflow:visible}
button,select{text-transform:none}
button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
input{line-height:normal}
input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}
input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}
legend{padding:0;border:0}
textarea{overflow:auto}
optgroup{font-weight:700}
table{border-spacing:0;border-collapse:collapse}
td,th{padding:0}
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print{
*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}
a,a:visited{text-decoration:underline}
a[href]:after{content:" (" attr(href) ")"}
abbr[title]:after{content:" (" attr(title) ")"}
a[href^="javascript:"]:after,a[href^="#"]:after{content:""}
blockquote,pre{border:1px solid #999;page-break-inside:avoid}
thead{display:table-header-group}
img,tr{page-break-inside:avoid}
img{max-width:100%!important}
h2,h3,p{orphans:3;widows:3}
h2,h3{page-break-after:avoid}
.navbar{display:none}
.btn>.caret,.dropup>.btn>.caret{border-top-color:#000!important}
.label{border:1px solid #000}
.table{border-collapse:collapse!important}
.table td,.table th{background-color:#fff!important}
.table-bordered td,.table-bordered th{border:1px solid #ddd!important}
}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}
button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}
a{color:#337ab7;text-decoration:none}
a:focus,a:hover{color:#23527c;text-decoration:underline}
a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
figure{margin:0}
img{vertical-align:middle}
.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}
.img-rounded{border-radius:6px}
.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.img-circle{border-radius:50%}
hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
[role=button]{cursor:pointer}
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}
.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-weight:400;line-height:1;color:#777}
.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}
.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{font-size:65%}
.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}
.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-size:75%}
.h1,h1{font-size:36px}
.h2,h2{font-size:30px}
.h3,h3{font-size:24px}
.h4,h4{font-size:18px}
.h5,h5{font-size:14px}
.h6,h6{font-size:12px}
p{margin:0 0 10px}
.lead{margin-bottom:20px;font-size:16px;font-weight:300;line-height:1.4}
@media (min-width:768px){
.lead{font-size:21px}
}
.small,small{font-size:85%}
.mark,mark{padding:.2em;background-color:#fcf8e3}
.text-left{text-align:left}
.text-right{text-align:right}
.text-center{text-align:center}
.text-justify{text-align:justify}
.text-nowrap{white-space:nowrap}
.text-lowercase{text-transform:lowercase}
.text-uppercase{text-transform:uppercase}
.text-capitalize{text-transform:capitalize}
.text-muted{color:#777}
.text-primary{color:#337ab7}
ol,ul{margin-top:0;margin-bottom:10px}
ol ol,ol ul,ul ol,ul ul{margin-bottom:0}
.list-unstyled{padding-left:0;list-style:none}
.list-inline{padding-left:0;margin-left:-5px;list-style:none}
.list-inline>li{display:inline-block;padding-right:5px;padding-left:5px}
.pre-scrollable{max-height:340px;overflow-y:scroll}
.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
@media (min-width:768px){
.container{width:750px}
}
@media (min-width:992px){
.container{width:970px}
}
@media (min-width:1200px){
.container{width:1170px}
}
.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
.row{margin-right:-15px;margin-left:-15px}
.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px;padding-right:15px;padding-left:15px}
.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{float:left}
.col-xs-12{width:100%}
.col-xs-11{width:91.66666667%}
.col-xs-10{width:83.33333333%}
.col-xs-9{width:75%}
.col-xs-8{width:66.66666667%}
.col-xs-7{width:58.33333333%}
.col-xs-6{width:50%}
.col-xs-5{width:41.66666667%}
.col-xs-4{width:33.33333333%}
.col-xs-3{width:25%}
.col-xs-2{width:16.66666667%}
.col-xs-1{width:8.33333333%}
@media (min-width:768px){
.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left}
.col-sm-12{width:100%}
.col-sm-11{width:91.66666667%}
.col-sm-10{width:83.33333333%}
.col-sm-9{width:75%}
.col-sm-8{width:66.66666667%}
.col-sm-7{width:58.33333333%}
.col-sm-6{width:50%}
.col-sm-5{width:41.66666667%}
.col-sm-4{width:33.33333333%}
.col-sm-3{width:25%}
.col-sm-2{width:16.66666667%}
.col-sm-1{width:8.33333333%}
}
@media (min-width:992px){
.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}
.col-md-12{width:100%}
.col-md-11{width:91.66666667%}
.col-md-10{width:83.33333333%}
.col-md-9{width:75%}
.col-md-8{width:66.66666667%}
.col-md-7{width:58.33333333%}
.col-md-6{width:50%}
.col-md-5{width:41.66666667%}
.col-md-4{width:33.33333333%}
.col-md-3{width:25%}
.col-md-2{width:16.66666667%}
.col-md-1{width:8.33333333%}
}
@media (min-width:1200px){
.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}
.col-lg-12{width:100%}
.col-lg-11{width:91.66666667%}
.col-lg-10{width:83.33333333%}
.col-lg-9{width:75%}
.col-lg-8{width:66.66666667%}
.col-lg-7{width:58.33333333%}
.col-lg-6{width:50%}
.col-lg-5{width:41.66666667%}
.col-lg-4{width:33.33333333%}
.col-lg-3{width:25%}
.col-lg-2{width:16.66666667%}
.col-lg-1{width:8.33333333%}
}
.nav{padding-left:0;margin-bottom:0;list-style:none}
.nav>li{position:relative;display:block}
.nav>li>a{position:relative;display:block;padding:10px 15px}
.nav>li>a:focus,.nav>li>a:hover{text-decoration:none;background-color:#eee}
.nav>li.disabled>a{color:#777}
.nav>li.disabled>a:focus,.nav>li.disabled>a:hover{color:#777;text-decoration:none;cursor:not-allowed;background-color:transparent}
.nav .open>a,.nav .open>a:focus,.nav .open>a:hover{background-color:#eee;border-color:#337ab7}
.nav .nav-divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}
.nav>li>a>img{max-width:none}
.tab-content>.tab-pane{display:none}
.tab-content>.active{display:block}
.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}
.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent}
@media (min-width:768px){
.navbar{border-radius:4px}
}
@media (min-width:768px){
.navbar-header{float:left}
}
.navbar-collapse{padding-right:15px;padding-left:15px;overflow-x:visible;-webkit-overflow-scrolling:touch;border-top:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.navbar-collapse.in{overflow-y:auto}
@media (min-width:768px){
.navbar-collapse{width:auto;border-top:0;-webkit-box-shadow:none;box-shadow:none}
.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}
.navbar-collapse.in{overflow-y:visible}
.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse{padding-right:0;padding-left:0}
}
.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:340px}
@media (max-device-width:480px) and (orientation:landscape){
.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:200px}
}
.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:-15px;margin-left:-15px}
@media (min-width:768px){
.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:0;margin-left:0}
}
.navbar-static-top{z-index:1000;border-width:0 0 1px}
@media (min-width:768px){
.navbar-static-top{border-radius:0}
}
.navbar-fixed-bottom,.navbar-fixed-top{position:fixed;right:0;left:0;z-index:1030}
@media (min-width:768px){
.navbar-fixed-bottom,.navbar-fixed-top{border-radius:0}
}
.navbar-fixed-top{top:0;border-width:0 0 1px}
.navbar-fixed-bottom{bottom:0;margin-bottom:0;border-width:1px 0 0}
.navbar-toggle{position:relative;float:right;padding:9px 10px;margin-top:8px;margin-right:15px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}
.navbar-toggle:focus{outline:0}
.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px}
.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}
@media (min-width:768px){
.navbar-toggle{display:none}
}
.navbar-nav{margin:7.5px -15px}
.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:20px}
@media (max-width:767px){
.navbar-nav .open .dropdown-menu{position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;-webkit-box-shadow:none;box-shadow:none}
.navbar-nav .open .dropdown-menu .dropdown-header,.navbar-nav .open .dropdown-menu>li>a{padding:5px 15px 5px 25px}
.navbar-nav .open .dropdown-menu>li>a{line-height:20px}
.navbar-nav .open .dropdown-menu>li>a:focus,.navbar-nav .open .dropdown-menu>li>a:hover{background-image:none}
}
@media (min-width:768px){
.navbar-nav{float:left;margin:0}
.navbar-nav>li{float:left}
.navbar-nav>li>a{padding-top:15px;padding-bottom:15px}
}
.navbar-nav>li>.dropdown-menu{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu{margin-bottom:0;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}
.navbar-btn{margin-top:8px;margin-bottom:8px}
.navbar-btn.btn-sm{margin-top:10px;margin-bottom:10px}
.navbar-btn.btn-xs{margin-top:14px;margin-bottom:14px}
.navbar-text{margin-top:15px;margin-bottom:15px}
@media (min-width:768px){
.navbar-text{float:left;margin-right:15px;margin-left:15px}
}
@media (min-width:768px){
.navbar-left{float:left!important}
.navbar-right{float:right!important;margin-right:-15px}
.navbar-right~.navbar-right{margin-right:0}
}
.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7}
.navbar-default .navbar-brand{color:#777}
.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover{color:#5e5e5e;background-color:transparent}
.navbar-default .navbar-text{color:#777}
.navbar-default .navbar-nav>li>a{color:#777}
.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{color:#333;background-color:transparent}
.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover{color:#555;background-color:#e7e7e7}
.navbar-default .navbar-nav>.disabled>a,.navbar-default .navbar-nav>.disabled>a:focus,.navbar-default .navbar-nav>.disabled>a:hover{color:#ccc;background-color:transparent}
.navbar-default .navbar-toggle{border-color:#ddd}
.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover{background-color:#ddd}
.navbar-default .navbar-toggle .icon-bar{background-color:#888}
.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:#e7e7e7}
.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.open>a:hover{color:#555;background-color:#e7e7e7}
@media (max-width:767px){
.navbar-default .navbar-nav .open .dropdown-menu>li>a{color:#777}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{color:#333;background-color:transparent}
.navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover{color:#555;background-color:#e7e7e7}
.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#ccc;background-color:transparent}
}
.navbar-default .navbar-link{color:#777}
.navbar-default .navbar-link:hover{color:#333}
.navbar-default .btn-link{color:#777}
.navbar-default .btn-link:focus,.navbar-default .btn-link:hover{color:#333}
.navbar-default .btn-link[disabled]:focus,.navbar-default .btn-link[disabled]:hover,fieldset[disabled] .navbar-default .btn-link:focus,fieldset[disabled] .navbar-default .btn-link:hover{color:#ccc}
.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" "}
.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both}
@-ms-viewport{width:device-width}
.visible-lg,.visible-md,.visible-sm,.visible-xs{display:none!important}
.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block{display:none!important}
@media (max-width:767px){
.visible-xs{display:block!important}
table.visible-xs{display:table!important}
tr.visible-xs{display:table-row!important}
td.visible-xs,th.visible-xs{display:table-cell!important}
}
@media (max-width:767px){
.visible-xs-block{display:block!important}
}
@media (max-width:767px){
.visible-xs-inline{display:inline!important}
}
@media (max-width:767px){
.visible-xs-inline-block{display:inline-block!important}
}
@media (min-width:768px) and (max-width:991px){
.visible-sm{display:block!important}
table.visible-sm{display:table!important}
tr.visible-sm{display:table-row!important}
td.visible-sm,th.visible-sm{display:table-cell!important}
}
@media (min-width:768px) and (max-width:991px){
.visible-sm-block{display:block!important}
}
@media (min-width:768px) and (max-width:991px){
.visible-sm-inline{display:inline!important}
}
@media (min-width:768px) and (max-width:991px){
.visible-sm-inline-block{display:inline-block!important}
}
@media (min-width:992px) and (max-width:1199px){
.visible-md{display:block!important}
table.visible-md{display:table!important}
tr.visible-md{display:table-row!important}
td.visible-md,th.visible-md{display:table-cell!important}
}
@media (min-width:992px) and (max-width:1199px){
.visible-md-block{display:block!important}
}
@media (min-width:992px) and (max-width:1199px){
.visible-md-inline{display:inline!important}
}
@media (min-width:992px) and (max-width:1199px){
.visible-md-inline-block{display:inline-block!important}
}
@media (min-width:1200px){
.visible-lg{display:block!important}
table.visible-lg{display:table!important}
tr.visible-lg{display:table-row!important}
td.visible-lg,th.visible-lg{display:table-cell!important}
}
@media (min-width:1200px){
.visible-lg-block{display:block!important}
}
@media (min-width:1200px){
.visible-lg-inline{display:inline!important}
}
@media (min-width:1200px){
.visible-lg-inline-block{display:inline-block!important}
}
@media (max-width:767px){
.hidden-xs{display:none!important}
}
@media (min-width:768px) and (max-width:991px){
.hidden-sm{display:none!important}
}
@media (min-width:992px) and (max-width:1199px){
.hidden-md{display:none!important}
}
@media (min-width:1200px){
.hidden-lg{display:none!important}
}
.visible-print{display:none!important}
body {
background-color: #efefec;
color: #444;
font: 14px/1.5 Roboto, Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-top: 0;
font-family: "Neuropolitical-Rg", "Arial Black", Roboto, sans-serif;
font-weight: normal;
}
.h1, h1 {
margin-bottom: 20px;
font-size: 40px;
text-align: center;
}
.main-header, .main-footer {
padding: 40px 20px;
background-color: #7c7e83;
color: #bbb;
}
.main-header {
border-bottom: 20px solid #bfd131;
text-align: center;
}
.main-footer {
border-top: 20px solid #bfd131;
}
.main-container {
margin-top: 20px;
margin-bottom: 20px;
}
.navbar-default {
position: relative;
top: -52px;
margin: 0 auto -32px; /* add 20px bottom margin */
background-color: #afabab;
border-color: #7c7e83;
font-family: "Neuropolitical-Rg", "Arial Black", Roboto, sans-serif;
}
.navbar-default .navbar-nav > li > a {
color: inherit;
}
.navbar-default .navbar-nav > li > a:hover {
background-color: #b9b6b6;
}
.navbar-default .navbar-nav > .active > a {
background-color: #cdcbcb;
}
.navbar-default .navbar-nav > .active > a:hover {
background-color: #d7d5d5;
}
.navbar-toggle {
float: left;
margin-left: 15px;
margin-right: 0;
}
.navbar-default .navbar-toggle {
border-color: #7c7e83;
background-color: #bbb;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: #7c7e83;
}
@media (min-width: 768px) {
.navbar-collapse {
padding: 0;
}
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-nav > li > a {
padding-left: 30px;
padding-right: 30px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.navbar-nav > li > a {
padding-left: 15px;
padding-right: 15px;
}
}
</style>
</head>
<body>
<header class="main-header">
<a href="/"></a><br>
</header>
<div class="container main-container" style="min-height:400px">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><span class="navbar-brand visible-xs-block">Menu</span></div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/" class="first">Home</a></li>
<li class=""><a href="#" class="">Test</a></li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-12">
<h1>Home</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</body>
</html>
请注意Firefox中标题“Home”之上的差距是多大。
我无法弄清楚导致问题的原因。我tried to make a simplified jsfiddle但无法重现问题 - 负边际效果与预期一致。
答案 0 :(得分：1)
如果你没有相对定位菜单，可能要简单得多，但只需使用负边距顶部来拖动它。然后，以下元素将自动向上移动。
如果您只是希望与小提琴表演相同，那么应该这样做：
.menu {
margin: -21px auto 0 auto;
background: lightgrey;
padding: 20px;
border: 1px solid darkgrey;
}
相对定位被移除，并被负边缘顶部取代; margin-bottom被移除，以便以下元素在正常流程中遵循 - https://jsfiddle.net/2t5ur94d/16/