Mr.*_*. X 6 html css firefox positioning
我有这个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中,页脚后面有很多空房间.我究竟做错了什么？怎么解决？
这是一个截图:蓝色突出显示是页脚.
(请注意:"position:fixed"不是我想要的;我希望页脚显示在页面底部,而不是浏览器窗口.)
Firefox中的问题是由display:table.基本上,你告诉Firefox将此元素视为一个表.
position:relative表元素不支持Firefox .这不是一个bug,因为在规范中,position:relative表元素的处理是未定义的.
这意味着在您的示例中,页脚相对于窗口而不是容器定位.
一种解决方案是使用display:block替代或完全删除display规则.您将看到页脚将下降到合适的位置.
第二种解决方案是在容器周围包装另一个非表格div,然后设置position:relative为该表格.
第三种选择是添加position:relative到身体.实例:http://jsfiddle.net/tw16/NbVTH/
body {
padding: 0;
margin: 0;
position: relative; /* add this */
}
| 归档时间： |
|
| 查看次数： |
7772 次 |
| 最近记录： |