我正在设计一个网页，但主要内容和页脚之间的边距在一个特定页面上折叠并且仅在 Firefox 中折叠。该代码完全通过 Firefox 验证，因此它不是某种怪癖模式。我无法仅在该页面上看到什么可以触发它，看看:
应如何显示:http://m.bradfieldandbentley.co.uk/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unsigned Central </title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Adrian Bradfield" >
<meta name="date" content="2013-06-19T20:31:59+0000" >
<meta name="generator" content="Bluefish 2.2.4" >
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/bootstrap/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/bootstrap/bootstrap/css/bootstrap-responsive.min.css">
<link rel="stylesheet" type="text/css" href="/style.css">
<script src="/jquery-1.9.1.js"></script>
<script src="/jquery.form.js"></script>
<script src="/jqueryPrint.js"></script>
<script src="/bootstrap/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="page-wrap">
<div id="navvy">
<div>
<img src="/Dev%20Resources/logo.png" alt="" />
</div>
<div class="loginwrap pull-right">
<div class='loginwrap input-append input-prepend'><form id='signin' class="form-inline" method='post' action='/signin.php'><a class='btn btn-success' href='/signup.php'>Sign up</a><span style='color:black;' class='add-on'> or </span>
<input type='hidden' name='signinSubmit' value='true'>
<input type='hidden' name='wai' value='/'>
<input name='uname' type="text" class="input-medium hidden-phone" placeholder="UserName">
<input name='pass' type="password" class="input-medium hidden-phone" placeholder="Password">
<button type="submit" form='signin' class="btn">Sign in</button></form></div></div>
<div id = "tabs" class="pull-left">
<ul class="nav nav-tabs">
<li class="active"><a href="/">Home</a></li>
<li ><a href="/events.php">Events</a></li>
<li ><a href="/directory.php">Directory</a></li>
<li ><a href="/forum">Forums</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="myCarousel" class="carousel slide hidden-phone">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="carousel-image">
<img class="fullWidth" style="position:relative;bottom:100px;" src="Dev Resources/1560_509086455797985_991852614_n.jpg" alt="">
</div>
<div class="carousel-caption">
<h4>You'll discover some cracking little pubs</h4>
<p>The best unsigned nights, are the ones at a venue full of character! You'll find some decent foreign beer as well if you go to the right places!</p>
</div>
</div>
<div class="item">
<div class="carousel-image">
<img class="fullWidth" style="position:relative;bottom:200px;" src="Dev Resources/18422_411647818919209_1736371262_n.jpg" alt="" />
</div>
<div class="carousel-caption">
<h4>Much wider variety</h4>
<p>You don't just get the same old acts at these nights either. Its not unheard of to turn up to find out there's a Latin band being followed by a reggae artist!</p>
</div>
</div>
<div class="item">
<div class="carousel-image">
<img class="fullWidth" style="position:relative;bottom:100px;" src="Dev Resources/772-1233162700Mt3z.jpg" alt="" />
</div>
<div class="carousel-caption">
<h4>Too small?</h4>
<p>If you do start to miss the bigger venues, even places like Manchester Academy hold unsigned nights, so why not pop on down!</p>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<div class="container-fluid articles">
<div class="row-fluid">
<div class="span4 offset1">
<!--Left-->
<h3>Looking for local talent?</h3>
<p>
Want to go to gigs but a bit strapped for cash? Or do you already enjoy discovering new bands?
</p>
<p>
This website will help you find out about local unsigned gigs in your area, at venues you may have never heard of before! To improve your chances of getting a great night out, all users can rate and leave feedback about their local unsigned bands and venues which support them. You can even sign up for e-mail alerts when more gigs are added in your area. </p> <p> <a class="hidden-phone btn btn-success" href="signup.php">Sign up</a> <a class="visible-phone btn btn-large btn-block btn-success"> Sign up </a> <em>for a listeners account today, free.</em>
</p>
</div>
<div class="span4 offset2">
<!--Right-->
<h3>Are you involved with the unsigned community?</h3>
<p>
Are you a promoter, own a venue, or even in an unsigned band yourself?</p>
<p>
Then join our growing community! It's all 100% free, and you'll get unrestricted access to the whole website. You can create events, add members in the directory to the event, rate members in the directory that you have previously worked with, and most importantly, get free publicity!
</p>
<p>
<a class="hidden-phone btn btn-success" href="signup.php">Sign up</a> <a class="visible-phone btn btn-large btn-block btn-success"> Sign up </a> <em>for a community account today, free.</em>
</p>
</div>
</div>
<div class="row-fluid">
<div class="span10 offset1">
<div class="well well-large">
<h3>
Features:
</h3>
<h4>Directory</h4>
<p>A country-wide directory consisting of: Bands, Venues, Practice rooms, Promoters, Recording Studios and Session Musicians. Pretty much anything you need for that next Demo launch, you can find here. And to make it just that little bit more useful, you can see how other people have rated them, and filter only those companies within a certain radius of you</p>
<p>All users can have a full directory listing free of charge. And for those SEO buffs out there, you get a free link to your website, with no requirement of payment or linkback. Although the links will be checked regularly to ensure they point to a related website.</p>
<h4>Profile pages</h4>
<p></p>
<h4>Events</h4>
<p>Events can be created by bands, promoter and venue accounts. They get attached to the map on the events page, and can be linked to all the bands, promoters and the venue accommodating it. </p>
<p>After the event, it becomes possible to add photos and videos to the gallery of the event page, and you can even allow users to upload their own photos. The page will then always remain in the archives, and stay linked up to the profiles of everyone involved.</p>
<h4>Forums</h4>
<p>The forums can be read by absolutely anybody, and edited by anyone with a free account. The forums may be basic as they have been built from scratch, so that it can be integrated seamlessly with the current login system. No community would be complete without a forum where you can chat to other users about whatever you want! So just go enjoy them!</p>
<h4>Feature requests</h4>
<p>This website is currently under development and is constantly improving, but if you think there's something that I've completely overlooked, there is a feature request section in the forums to leave me your ideas, and i promise to read them as often as possible! For bug reports, please send an email straight to .... instead</p>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span10 offset1">
<div class="well well-large">
<h3>
News:
</h3>
<table class="table">
<tr><td>00/00/0000</td><td>The launch of Unsigned Central has arrived after months of development! Create an account and be one of the first few to try it today, and if you like it, spread the world! Help build the first online unsigned band community!</td></tr>
</table>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.carousel').carousel({
interval: 10000
})
})
</script>
</div>
</div>
<footer>
<div class="site-footer">
<div class="container-fluid articles">
<div class="row-fluid">
<div class="span4">
<!--Left row-->
<h5>About us</h5>
<ul>
<li><a href="/adibradfield.php" >About the creator</a></li>
</ul>
</div>
<div class="span4">
<!--Middle row-->
<h5>Your Privacy</h5>
<ul>
<!--<li><a id="templateCookieBtn" href="/cookies.php" role="button" data-toggle="modal">Cookie Policy</a></li>-->
<li id="showCookie"><a id="templateCookieBtn" href="/cookies.php" role="button" data-toggle="modal">Cookie Policy</a></li>
<!--<li><a id="templatePrivacyBtn" href="/privacy.php" role="button" data-toggle="modal">Privacy Policy</a></li>-->
<li id="showPrivacy"><a id="templatePrivacyBtn" href="/privacy.php" role="button" data-toggle="modal">Privacy Policy</a></li>
</ul>
</div>
<div class="span4">
<!--Right row-->
<h5>Our Affiliates</h5>
</div>
</div>
</div>
</div>
<!--MODAL-->
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="modalTitle"></h3>
</div>
<div id="modal-content" class="modal-body">
</div>
<div class="modal-footer">
<button id="modalPrint" class="btn btn-info hidden-phone" onClick=''>Print</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
<!--GLOBAL JAVASCRIPT-->
<script type="text/javascript" >
/*Convert elements to javascript*/
$('document').ready(function() {
$("#showCookie").html("<a class='hoverHand' id=\"templateCookieBtn\" onClick=\"openModal('Cookie Policy','/cookies.php')\">Cookie Policy</a>");
$("#showPrivacy").html("<a class='hoverHand' id=\"templateCookieBtn\" onClick=\"openModal('Privacy Policy','/privacy.php')\">Privacy Policy</a>");
});
function openModal(heading, url) {
$.ajax({
url: url,
cache: false
}).done(function( html ) {
$("#modal-content").html(html);
$("#modalTitle").html(heading);
$('#modalPrint').attr('onClick', 'loadPrintDocument(modalPrint, {attr : "href", url : "'+ url +'", showMessage: false, message: "Please wait while we create your document"})');
$('#modal').modal('show');
$("#modal-content").scrollTop(0);
});
}
$('#modal').on('shown', function () {
$("#modal-content").scrollTop(0);
});
</script>
</footer>
</body>
</html>
为什么不应该:http://m.bradfieldandbentley.co.uk/forum/topic/3
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unsigned Central|Forum </title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Adrian Bradfield" >
<meta name="date" content="2013-06-19T20:31:59+0000" >
<meta name="generator" content="Bluefish 2.2.4" >
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/bootstrap/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/bootstrap/bootstrap/css/bootstrap-responsive.min.css">
<link rel="stylesheet" type="text/css" href="/style.css">
<script src="/jquery-1.9.1.js"></script>
<script src="/jquery.form.js"></script>
<script src="/jqueryPrint.js"></script>
<script src="/bootstrap/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="page-wrap">
<div id="navvy">
<div>
<img src="/Dev%20Resources/logo.png" alt="" />
</div>
<div class="loginwrap pull-right">
<div class='loginwrap input-append input-prepend'><form id='signin' class="form-inline" method='post' action='/signin.php'><a class='btn btn-success' href='/signup.php'>Sign up</a><span style='color:black;' class='add-on'> or </span>
<input type='hidden' name='signinSubmit' value='true'>
<input type='hidden' name='wai' value='/forum/topic/17'>
<input name='uname' type="text" class="input-medium hidden-phone" placeholder="UserName">
<input name='pass' type="password" class="input-medium hidden-phone" placeholder="Password">
<button type="submit" form='signin' class="btn">Sign in</button></form></div></div>
<div id = "tabs" class="pull-left">
<ul class="nav nav-tabs">
<li ><a href="/">Home</a></li>
<li ><a href="/events.php">Events</a></li>
<li ><a href="/directory.php">Directory</a></li>
<li class="active"><a href="/forum">Forums</a></li>
</ul>
</div>
</div>
<div id="content">
<div class="pull-left input-append input-prepend">
<button class="btn btn-success"> <i class="icon-thumbs-up"></i></button><span style='color:black;' class='add-on'> 0 </span> <button class="btn btn-danger"> <i class="icon-thumbs-down"></i></button>
</div>
<div style="clear:left;">
<h1>Forum Topic <small><span class="muted">Created by: Joe Bloggs on 00/00/00 00:00</span></small></h1>
</div>
<div class="container-fluid forumFix">
<div class="row-fluid well">
<div class="span3">
<img class="img-rounded" alt="140x140" src="http://lorempixel.com/140/140/" />
<ul class="unstyled">
<li> <strong> Joe Bloggs </strong></li>
<li> Joined: 00/00/00 </li>
<li> Account: Standard </li>
</ul>
</div>
<div class="span9">
<div class="row-fluid">
<div class="span12">
<div class="pull-right input-append input-prepend" style="margin-left:20px;">
<button class="btn btn-success"> <i class="icon-thumbs-up"></i></button><span style='color:black;' class='add-on'> 0 </span> <button class="btn btn-danger"> <i class="icon-thumbs-down"></i></button>
</div>
<div>
<p class="text-right muted" style="margin-right:20px;">
Posted: 00/00/00 00:00
</p>
</div>
</div>
</div>
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
<div class="btn-group pull-right">
<button class="btn">Action</button> <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li class="divider">
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="site-footer">
<div class="container-fluid articles">
<div class="row-fluid">
<div class="span4">
<!--Left row-->
<h5>About us</h5>
<ul>
<li><a href="/adibradfield.php" >About the creator</a></li>
</ul>
</div>
<div class="span4">
<!--Middle row-->
<h5>Your Privacy</h5>
<ul>
<!--<li><a id="templateCookieBtn" href="/cookies.php" role="button" data-toggle="modal">Cookie Policy</a></li>-->
<li id="showCookie"><a id="templateCookieBtn" href="/cookies.php" role="button" data-toggle="modal">Cookie Policy</a></li>
<!--<li><a id="templatePrivacyBtn" href="/privacy.php" role="button" data-toggle="modal">Privacy Policy</a></li>-->
<li id="showPrivacy"><a id="templatePrivacyBtn" href="/privacy.php" role="button" data-toggle="modal">Privacy Policy</a></li>
</ul>
</div>
<div class="span4">
<!--Right row-->
<h5>Our Affiliates</h5>
</div>
</div>
</div>
</div>
<!--MODAL-->
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="modalTitle"></h3>
</div>
<div id="modal-content" class="modal-body">
</div>
<div class="modal-footer">
<button id="modalPrint" class="btn btn-info hidden-phone" onClick=''>Print</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
<!--GLOBAL JAVASCRIPT-->
<script type="text/javascript" >
/*Convert elements to javascript*/
$('document').ready(function() {
$("#showCookie").html("<a class='hoverHand' id=\"templateCookieBtn\" onClick=\"openModal('Cookie Policy','/cookies.php')\">Cookie Policy</a>");
$("#showPrivacy").html("<a class='hoverHand' id=\"templateCookieBtn\" onClick=\"openModal('Privacy Policy','/privacy.php')\">Privacy Policy</a>");
});
function openModal(heading, url) {
$.ajax({
url: url,
cache: false
}).done(function( html ) {
$("#modal-content").html(html);
$("#modalTitle").html(heading);
$('#modalPrint').attr('onClick', 'loadPrintDocument(modalPrint, {attr : "href", url : "'+ url +'", showMessage: false, message: "Please wait while we create your document"})');
$('#modal').modal('show');
$("#modal-content").scrollTop(0);
});
}
$('#modal').on('shown', function () {
$("#modal-content").scrollTop(0);
});
</script>
</footer>
</body>
</html>
我的 CSS:
/********************************
COLOR SCHEME:
Dark Red: #A30000
Black: #000000
White: #FFFFFF
*********************************/
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
* {
margin: 0;
}
html, body {
background-color: #A30000;
margin:0px;
padding: 0px;
height: 100%;
}
#navvy {
width: 100%;
background-color: #000000;
overflow: hidden;
color: #FFFFFF;
margin:0px;
padding:0px;
}
#tabs {
position: relative;
bottom: 0px;
margin-bottom: -20px;
margin-left:10px;
}
.loginwrap {
position: relative;
bottom: 0px;
margin-right: 10px;
padding-top: 5px;
margin-bottom: -20px
}
#content {
background-color: #FFFFFF;
width: 80%;
padding: 2%;
margin-left: 8%;
margin-top: 30px;
margin-bottom: 200px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
-moz-box-shadow: 3px 3px 7px 9px #000000;
-webkit-box-shadow: 3px 3px 7px 9px #000000;
box-shadow: 3px 3px 7px 9px #000000;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -90px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
margin-bottom: -20px;
}
.site-footer {
margin-top: 90px;
background: #000000;
-moz-box-shadow: 3px 3px 7px 9px #000000;
-webkit-box-shadow: 3px 3px 7px 9px #000000;
box-shadow: 3px 3px 7px 9px #000000;
}
#map-canvas {
width: 100%; height: 100%; }
.fullWidth{
width:100%;
}
.carousel-image{
overflow: hidden;
max-height: 370px;
}
.articles{
text-align: justify;
}
.progress .bar {
height: 100%
}
.hoverHand {
cursor: hand;
cursor: pointer;
}
.forumFix {
margin-right: 4%;
padding: 0px;
}
.forumFix p{
font-size: 12px;
}
.forumFix .row-fluid{
width:96%;
}
.forumFix .well{
padding: 2%;
}
注意:当通过 Firefox 网络检查器查看页面时，它会正常显示。一关上，又崩了!我对这个一无所知!
注意 2:对于 HTML 的格式，我提前表示歉意，我认为 cloud flare 以这种方式提供。如果需要，我很乐意在此处包含格式正确的 HTML。
最佳答案
好的，我终于能够通过对 CSS 进行编辑来修复它。我不明白为什么会这样，这似乎是 Firefox 特定的错误!此修复仍然允许在 IE 中正确显示。这是我添加到我的 CSS 中的内容:
.forumFix {
margin-right: 4%;
padding: 0px;
display: inline-block;
}
关于CSS:Firefox 中消失的边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17200658/