我已经为这个问题苦苦挣扎了很长一段时间。该问题可以在移动设备(Android 和 iOS)上看到，某些设备可能需要稍微放大。在 PC 上，当切换到移动模式时，我也可以在 Chrome 浏览器上重现此错误。以下是用于重现该错误的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.top {
height: 100px;
background-color: #553213;
}
.middle {
height: 100px;
background-color: #553213;
}
.bottom {
height: 100px;
background-color: #553213;
}
</style>
</head>
<body>
<div style="width:300px; height: 300px">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</body>
</html>预期的结果将是一个满足 #553213 颜色的 div。但是，在某些移动设备上，它们会在这三个 div 之间显示额外的线条(或间隙)。
我的 iPhone
在我的电脑上，使用移动模式的 Chrome 浏览器
有人知道这是怎么回事吗？任何关于它是如何发生以及如何修复它的想法将不胜感激。
最佳答案
我找到了this回答。
所以解决办法是添加一个margin-top: -1px;至top , middle ，和bottom类。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.top {
height: 100px;
background-color: #553213;
}
.middle {
height: 100px;
background-color: #553213;
}
.bottom {
height: 100px;
background-color: #553213;
}
.top, .middle, .bottom {
margin-top: -1px;
}
</style>
</head>
<body>
<div style="width:300px; height: 300px;">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</body>
</html>而且它在移动设备和 PC 上看起来也很不错。 div s 的高度没有改变。它仍然是300px 。
关于html - 如何消除具有相同背景颜色的三个 div 之间的奇怪间隙？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59385366/