我有这个 HTML 源代码：
<!DOCTYPE html>
<html>
<head>
<title>Stylish Web Page</title>
<style type="text/css">
body { padding: 0; margin: 0; }
div.table { display: table;}
div.tableRow { display: table-row;}
div.tableCell { display: table-cell;}
div.contentWrapper { width: 100%; height: 760px; position: relative;
margin: 0 auto; padding: 0; }
div.footerBar { width: inherit; height: 60px; background-image: url("BarBG.png");
background-repeat: repeat-x; position: absolute; bottom: 0; }
</style>
</head>
<body>
<div class="table contentWrapper">
<div class="tableRow"> </div>
<div class="footerBar"> </div>
</div>
</body>
</html>
页脚应该出现在页面底部，在 Opera 和 Chrome 中也是如此；然而，在 Firefox 中，页脚后面有很多空白空间。我究竟做错了什么？如何修复它？
这是一个屏幕截图：蓝色突出显示的是页脚。 https://i.stack.imgur.com/VgLXW.jpg
（请注意：“位置：固定”不是我想要的；我希望页脚显示在页面底部，而不是浏览器窗口。）
Firefox 中的问题是由display:table。本质上，您是在告诉 Firefox 将此元素视为表格。
在火狐中position:relative表格元素不支持。但这不是一个错误，正如规范中的处理那样position:relative表元素未定义。
这意味着在您的示例中，页脚是相对于窗口而不是容器定位的。
一种解决方案是使用display:block相反或只是删除display完全统治。您会看到页脚将下降到正确的位置。
第二种解决方案是在容器周围包裹另一个非表 div 并设置position:relative改为那个。
第三个选项是添加position:relative到身体。实例：http://jsfiddle.net/tw16/NbVTH/ http://jsfiddle.net/tw16/NbVTH/
body {
padding: 0;
margin: 0;
position: relative; /* add this */
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
