在手机自带浏览器遇到的一个关于position的坑,absolute设置的位置没出现在预期

结构是这样的

<div class="box"> <div class="content">something</div> <div class="inner"></div></div>

样式是这样的

.box { position: relative; width: 160px; height: 160px; border: 1px solid #f3f5f7;}.content { width: 100%; height: 40px; background-color: #ee0000;}.inner { position: absolute; left: 0; bottom: 15px; width: 100%; height: 40px; background-color: #f3f5f7;}

但是发现在一些浏览器上并没有距离底边15px,而是距离.content的底部15px;
图片描述

我的解决方法是:

<div class="box"> <div class="content">something</div> <div class="inner"> <div class="set"></div> </div></div><style>.box { position: relative; width: 160px; height: 160px; border: 1px solid #f3f5f7;}.content { width: 100%; height: 40px; background-color: #ee0000;}.inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}.set { position: absolute; left: 0; bottom: 15px; width: 100%; height: 40px; background-color: #f3f5f7;}</style>

我觉得肯定还有其他的解决办法,一时没想到,想着向大家学习下,看看其他的解决办法

本文转载于:猿2048?https://www.mk2048.com/blog/blog.php?id=hakjji2cbaa

相关文章