如何消除具有相同背景颜色的三个 div 之间的奇怪间隙？
我在这个问题上挣扎了很长一段时间。在移动设备（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>预期的结果将是一个 div，它的颜色为 #553213。但是，在某些移动设备上，它们会在这三个 div 之间显示额外的线条（或间隙）。
我的 iPhone
在我的 PC 上，使用带移动模式的 Chrome 浏览器
有谁知道这里发生了什么？任何关于它如何发生以及如何修复它的想法都将不胜感激。
我找到了这个答案。
因此，解决方案是将添加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身高不会改变。它仍然存在300px。
我想这是由于页面的规模。尝试将此元标记添加到头部：
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
| 归档时间： |
|
| 查看次数： |
662 次 |
| 最近记录： |