我正在设计一个网页，但是在某个特定页面和仅在Firefox浏览器中，主要内容和页脚之间的边距会折叠。该代码在Firefox中完全验证，因此不是某种怪癖模式。我看不出什么原因会仅在该页面上触发它，请看一下：
应该如何显示：http://m.bradfieldandbentley.co.uk/
如何不应该做： http://m.bradfieldandbentley.co.uk/forum/topic/3
注意：当页面通过Firefox网页检查器查看时，它会正常显示。但一旦关闭，它就会再次折叠！我对这个问题毫无头绪！
注2：我提前为HTML的格式化表示歉意，我认为是Cloud Flare以那种方式传递它。如果需要，我很乐意在此处包含正确格式化的HTML。
应该如何显示：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。