Firefox CSS位置问题

Question

我有一个问题，一个页脚div的定位应该把div内的一切都钉在页面的底部。它正在Chrome, IE和Edge等上工作…但是在firefox中，这是有问题的，因为div内容不能留在页面的底部。

我想你们自己看这个会更容易，所以这里是有问题的页面的链接，供你们做出判断，希望能帮助我。

你会看到"News:"这个词在页面上隐隐约约地出现。

http://goo.gl/xOg4uN

下面是CSS:

* {margin:0;padding:0;} 
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {
overflow:auto;
padding-bottom: 180px; /* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear:both;
} 
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}

Answer 1

因为你的#footer是相对于其他div的，而你是通过margin属性来定位你的#footer, Firefox不会像你期望的那样计算。

下面的代码应该适用于所有浏览器:

#footer{
  position: absolute;
  bottom: 0px;
}