我有一个外部相对 div 和两个内部绝对 div。内部 div 应该完全覆盖外部,但是当它们在桌面上这样做时,在平板电脑上在内部 div2 和包围的外部 div 之间有一些空间。这是怎么回事?这是一个错误吗??
这是 a screenshot .
.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'); */
}
<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>
最佳答案
我认为您可以尝试将 -webkit-transform: translate3d(0,0,0);
添加到您的外部 div。显然它会强制硬件加速,隐藏不需要的伪影。
.outer {
width:300px;
height:200px;
margin:60px auto;
position:relative;
-webkit-transform: translate3d(0,0,0);
}
关于html - 用内部绝对覆盖外部相对 DIV 的 100% 宽度和高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47795256/