您的位置：首页 > 其它

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

2016-07-08 14:32 375 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 火狐浏览器绝对定位 box失效

相关文章推荐

新的分享

章节导航