CSS：Firefox中消失的边缘
我正在设计一个网页，但是主要内容和页脚之间的空白在一个特定的页面上缩小，并且只在Firefox中缩小。该代码通过Firefox完全验证，因此它不是某种怪癖模式。我无法在该页面上看到触发它的原因，请看： 应如何显示： 注意：当通过Firefox web inspector查看页面时，页面显示良好。一旦它关闭，它就会再次崩溃！我对这件事一无所知CSS：Firefox中消失的边缘,css,html,firefox,Css,Html,Firefox,我正在设计一个网页，但是主要内容和页脚之间的空白在一个特定的页面上缩小，并且只在Firefox中缩小。该代码通过Firefox完全验证，因此它不是某种怪癖模式。我无法在该页面上看到触发它的原因，请看： 应如何显示： 注意：当通过Firefox web inspector查看页面时，页面显示良好。一旦它关闭，它就会再次崩溃！我对这件事一无所知 注2：对于HTML的格式，我提前表示歉意，我认为CloudFlare就是这样提供的。如果需要的话，我很乐意在这里包含格式正确的HTML。好的，我终于能够通过
注2：对于HTML的格式，我提前表示歉意，我认为CloudFlare就是这样提供的。如果需要的话，我很乐意在这里包含格式正确的HTML。好的，我终于能够通过对CSS的编辑来修复它。我不明白为什么会发生这种情况，它只是看起来像是一个特定于Firefox的bug！此修复仍然允许在IE中正确显示。这是我添加到CSS中的内容：
.forumFix {
margin-right: 4%;
padding: 0px;
display: inline-block;
}
请在这里发布您的代码。在Windows7上使用Firefox21.0时，这些页面看起来完全相同。你使用的是什么版本的Firefox？@CaptainSkyhawk我也在使用21.0。在第二页，页面的主要内容和黑色页脚之间有一个空格？@j08691我已经编辑了这个问题
<!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>
/********************************
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%;
}
.forumFix {
margin-right: 4%;
padding: 0px;
display: inline-block;
}