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

时间 2019-11-15

标签手机自带浏览器遇到一个关于 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；
spa

个人解决方法是：code

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

我以为确定还有其余的解决办法，一时没想到，想着向你们学习下，看看其余的解决办法blog