火狐下不支持position:relative;top:50%;?

来源:互联网 发布:网络直播 yy 编辑:程序博客网 时间:2024/05/01 11:32

要实现垂直居中,见代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>Measure for Measure</TITLE></HEAD><BODY ><style>    body{text-align:center;height:100%;}#wrap{height:100px;width:100px;border:1px solid red;text-align:center;/*关键代码*/position:relative;top:50%;margin-top:-50px;/*水平居中 FF下*/margin-left:auto;margin-right:auto;}</style><BODY><div id="wrap">aaaa</div></BODY></HTML>


这段代码在IE  FF下都兼容;

网上很多评论FF不支持position:relative; 这是不对的任何浏览器都支持position:relative;

若上面代码注释掉body{height:100%;};则FF下会出现问题;问题就是

positon:relative;top:50%;

50%相对父元素的高;但是body没有指定高;(IE下应该是默认body{100%;})

所以需要用到百分比时,一定指定其所在容器的大小!

原创粉丝点击