使用 Firefox 浏览器时网站有太多填充

Question

我的团队为大学写作会议创建了一个网站。我们的问题是，在使用火狐的时候，页面底部的空白太多了，几乎是一整页的价值！

在 Safari 和资源管理器中，空白在页脚之后结束。

为什么在 Firefox 上会这样？

Here is a link到网站，下面是我们的CSS代码；

    /* CSS Reset */
* { margin:0; padding:0; }
html,
body {
    margin:0;
    padding:0;
    height:100%;  
    /* IE10 */ 
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #C2E6F6 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #C2E6F6 100%);

    /* Opera */ 
    background-image: -o-linear-gradient(top, #FFFFFF 0%, #C2E6F6 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #C2E6F6));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #C2E6F6 100%);

    /* Proposed W3C Markup */ 
    background-image: linear-gradient(top, #FFFFFF 0%, #C2E6F6 100%);
    background-attachment:fixed;
    font-family: 'Telex'; sans-serif;
}

h1 {
    font-family: 'Asap', sans-serif;
    font-size:50px;
    color:#FF3300;
}

h2 {
    font-family: 'Asap', sans-serif;
    font-size:40px;
    color:#FF9E00;
}

h3 {
    font-family: 'Asap', sans-serif;
    font-size:30px;
    color:#FF3300;
}
h3 a {font-family: 'Asap', sans-serif;
    font-size:30px;
    color:#FF3300;
}

p {
    font-family: 'Telex', sans-serif;
    font-size:18px;
    margin-top:1.2em;
    margin-bottom:1.2em;
}
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
table.center {
    margin-left:auto; 
    margin-right:auto;
}
ul {
    font-family: 'Telex', sans-serif;
}
ul li {
    font-family: 'Telex', sans-serif;
    margin-left:20px;
}
img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto 
}
a img {
    border: none;
}
#container {
  position:relative;
  width:960px;
  margin:0 auto;
}
#header {
  height:175px;
  width:960px;
  margin: 0 auto 0 auto;
  position:relative;
}
#header h1 {
  display:block;
  float:left;
  width:600px;
  height:175px;
  background:url(img/ncptwbanner.gif) no-repeat 0 0;
  background-size:600px 175px;
  text-indent:-10000px;
  }
#header h1 a {
  display:block;
  position:absolute;
  width:600px;
  height:175px;
}  
#header h2 {
    display:block;
    float:right;  
    position:relative;
    width:315px;
    height:182px;
    margin:0;
    background:url(img/chicago_box.jpg) no-repeat 0 0;
    text-indent:-10000px;
  }
#navigation {
    width:960px;
    height:90px;
    margin:0 auto 0 auto;
}
#navigation ul {
  display:block;
  float:right;
  width:960px;
  height:90px;
  background:url(img/menu.jpg) no-repeat 0 0;
  list-style:none;
  padding:0;
}
#navigation ul li {
  display:block;
  float:left;  
  height:90px;
  text-indent:-10000px;
  margin-left:0px;
 }
#about {
  width:221px;
}
#call {
  width:203px;
}
#schedule {
  width:140px;
}
#explore {
  width:217px;
}
#register {
  width:179px;
}
#navigation ul li a {
  display:block;
  width:100%;
  height:100%;
}
#about a:hover {
  background:url(img/menu.jpg) no-repeat 0 -90px;
}
#call a:hover {
  background:url(img/menu.jpg) no-repeat -221px -90px;
}
#schedule a:hover {
  background:url(img/menu.jpg) no-repeat -424px -90px;
}
#explore a:hover {
  background:url(img/menu.jpg) no-repeat -564px -90px;
}
#register a:hover {
  background:url(img/menu.jpg) no-repeat -781px -90px; 
}
#body {
    display:relative;
    float:left;
    width:960px;
    margin-top: 15px;
    margin-bottom: 15px;
    padding:10px;
    -moz-box-shadow: 0 0 5px 5px #888;
    -webkit-box-shadow: 0 0 5px 5px#888;
    box-shadow: 0 0 5px 5px #888;
}

.imgLeft {
    display:inline-block;
    float:left;
    margin:2px;
    padding:0;
    border-style:solid;
    border-width:3px;
}
.imgRight {
    display:inline-block;
    float:right;
    margin: 2px;
    padding:0;
    border-style:solid;
    border-width:3px;
}
#featured_text {
    display:inline-block;
    float:left;
    width:520px;
    margin:auto;
    padding:4px;
}
#single_column_featured_text {
    display:block;
    float:left;
    width: 950px;
    margin: 0px 0px 0px 0px;
    padding: 0px 10px 0px;
}
#single_column_featured_text h1 {
    font-size:30px;
}
#second_column {
    display:inline-block;
    float:left;
    width:420px;
    margin:0;
    padding:4px;
}
#john_hancock {
    position:relative;
    width:142px;
    height:660px;
    float:left;
    left:-142px;
    bottom:660px;
    margin-left:-10px;
    padding:4px;
}
#sears_tower {
    position:relative;
    width:156px;
    height:822px;
    float:right;
    right:-156px;
    bottom:822px;
    margin-right:-45px;
    padding:4px;
}
footer { 
   position:absolute;
   bottom:0;
   width:100%;
   height:20px;   /* Height of the footer */
 }
#footer p {
  margin:0;
  padding:10px;
  font-size:.75em;
  text-align:center;
 }

Answer 1

问题来自#john_hancock 和#sears_tower。它们具有position: relative 并且它们从其自然位置通过bottom 属性移动。它的自然位置位于页面的底部空间。问题是设置了相对位置的元素仍然保留了最初为它们保留的空间。 Look at this link for more information.

我认为你能做的最好的事情是稍微改变你的标记并使用 CSS 显示那两个塔图像作为背景图像。这是更正确的，因为图像不是内容，而是风格。 HTML 用于内容而不是样式。这样您就不会遇到这些布局问题。