Question

我发现页脚在Chrome上显示正常，但看起来它在Firefox上没有overflow:hidden;。包装div仍然在页脚下方稍微多了一点。

<div class="wrapper6"> // at gallery.html
<div class="wrapper8"> // at galeri2013.html

以下是这两个包装器div的CSS属性：

.wrapper6 {
   margin:0 !important;
   padding:0 !important;
   left:0;
   top:0;
   position:absolute;
   background:url(../images/texture.png) repeat;
   width:100%;
   height:180% !important;
   font-family: orator std;
   overflow:hidden;
}
.wrapper8 {
   margin:0 !important;
   padding:0 !important;
   left:0;
   top:0;
   position:absolute;
   background:url(../images/texture.png) repeat;
   width:100%;
   height:280% !important;
   font-family: orator std;
   overflow:hidden;
}

两个页脚的属性;

galeri2013.html;

.footy4 {
   position:relative;
   display:inline !important;
   float:left;
   z-index:1;
   left:0;
   margin-bottom:-4.3%;
   transform:skewX(8deg);
   -webkit-transform:skewX(8deg);
   transform:skewY(-2.5deg);
   -webkit-transform:skewY(-2.5deg);
   background-color:#e81b1b;
   width:100%;
   height:120px;
   margin-top:96%;
   overflow:hidden;
}

gallery.html;

.footy7 {
   position:relative;
   display:inline !important;
   float:left;
   z-index:1;
   left:0;
   margin-bottom:-4.3%;
   transform:skewX(8deg);
   -webkit-transform:skewX(8deg);
   transform:skewY(-2.5deg);
   -webkit-transform:skewY(-2.5deg);
   background-color:#e81b1b;
   width:100%;
   height:120px;
   margin-top:150%;
   overflow:hidden;
}

我认为我没有使用最好的方法来处理它，如果你发现任何错误/不是最好的编码方式，请告诉我，以便我可以学习并提高自己。

再次澄清一下，我想让我的页脚在Firefox上停留在底部，就像在Chrome上一样！

Answer 1

好！几个小时后，我看到了什么错...我已经将页脚div放入包装div中，一切正常！

所以这就是我基本上所做的事情;

<div class="wrapper">
    //some other content
<div class=footer>
    //footer content
</div>
</div>

并且我已经将overflow:hidden;放回到我已删除的包装器以测试错误。你可以在这个问题上看到我在这里使用过的其他css属性。

希望这些对某些人有用，并感谢所有帮助过的人。

有浏览器差异问题（Firefox） - 溢出和/或包装器的高度

1 个答案: