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

最新推荐文章于 2020-07-10 16:21:31 发布

肾虚码农

最新推荐文章于 2020-07-10 16:21:31 发布

阅读量3.9k

点赞数

分类专栏：前端开发文章标签： html 浏览器 ie

本文链接：https://blog.csdn.net/lidiansheng/article/details/7961327

版权

前端开发专栏收录该内容

34 篇文章 0 订阅

订阅专栏

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

<!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%;})

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

肾虚码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
火狐下不支持position:relative;top:50%;？

要实现垂直居中,见代码：Measure for Measure body{text-align:center;height:100%;} #wrap{ height:100px; width:100px; border:1px solid red; text-align:center; /*关键代码*/ position:relat
复制链接

扫一扫