火狐浏览器，绝对定位元素设置display:box失效及解决办法

最新推荐文章于 2022-10-19 23:20:46 发布

可乐6666

最新推荐文章于 2022-10-19 23:20:46 发布

阅读量3.6k

点赞数 3

分类专栏： CSS 文章标签：火狐浏览器绝对定位 box失效

本文链接：https://blog.csdn.net/xuexizhe88/article/details/51860728

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>火狐浏览器下绝对定位失效</title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			body{position: relative;	}
			.wrap{
				width: 200px;
				height: 200px;
				background-color: lightcoral;
				position: absolute;
				left: 150px;
				top:150px;
				display: -moz-box;
				display: -webkit-box;
				-webkit-box-align: center;
				-webkit-box-pack: center;
				-moz-box-align: center;
				-moz-box-pack: center;
			}
			.content{
				width:100px;
				height: 100px;
				background-color: lightblue;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="content"></div>
		</div>
	</body>
</html>

代码如上图：

1、display：box后通过align和pack的center，可以是元素水平垂直居中

2、对wrap加上绝对定位后，在火狐中display：box失效了，经过试验，在safari和谷歌浏览器中仍然正常

3、解决办法：在wrap和content中间在加层div，设其class为middle，div的大小是wrap的宽度和高度的100%，在wrap中绝对定位，在middle中设置display：box，则能达到content在middle居中的效果，即content在wrap水平和垂直居中的效果

更改代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>火狐浏览器下绝对定位失效</title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			body{position: relative;	}
			.wrap{
				width: 200px;
				height: 200px;
				background-color: lightcoral;
				position: absolute;
				left: 150px;
				top:150px;
			}
			.middle{
				width: 100%;
				height: 100%;
				display: -moz-box;
				display: -webkit-box;
				-webkit-box-align: center;
				-webkit-box-pack: center;
				-moz-box-align: center;
				-moz-box-pack: center;
			}
			.content{
				width:100px;
				height: 100px;
				background-color: lightblue;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="middle">
				<div class="content"></div>
			</div>
		</div>
	</body>
</html>

可乐6666

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
火狐浏览器，绝对定位元素设置display:box失效及解决办法

火狐浏览器下绝对定位失效 *{padding: 0;margin: 0;} body{position: relative; } .wrap{ width: 200px; height: 200px; background-color: lightcoral; position: absolute; left: 150px;
复制链接

扫一扫

专栏目录