Question

我有一个外部相对 div，有两个内部绝对 div。内部div应该完全覆盖外部，但是当他们在桌面上这样做时，在平板电脑上在内部div2和包含外部div之间有一些空间。发生了什么事？这是一个错误吗？

＆＃13;

.problem-description {
  display:block;
  margin:20px;
}

.outer {
  width:300px; 
  height:200px;
  margin:60px auto;
  position:relative;
}
.inner1, .inner2 {
  width:100%;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
}
.inner1 {
  background:blue;  
}
.inner2 {
  background:white;
/*   background:url('https://nofri.es/wp-content/uploads/images/port-bubble2.svg'); */
}

＆＃13;

<div class="outer">
  <div class="inner1"></div>
  <div class="inner2"><span class="problem-description">the blue edge of .inner1 div bleeds around .inner2 on mobile</span></div>
</div>

＆＃13;

Answer 1

我认为您可以尝试将-webkit-transform: translate3d(0,0,0);添加到您的外部div中。显然它会强制硬件加速，隐藏不需要的工件。

.outer {
  width:300px; 
  height:200px;
  margin:60px auto;
  position:relative;
  -webkit-transform: translate3d(0,0,0);
}

覆盖外部相对DIV的100％宽度和高度，内部绝对值

1 个答案: