gpt4 book ai didi

html - 如何消除具有相同背景颜色的三个 div 之间的奇怪间隙?

转载 作者:行者123 更新时间:2023-12-03 02:35:15 26 4
gpt4 key购买 nike

我已经为这个问题苦苦挣扎了很长一段时间。该问题可以在移动设备(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

enter image description here

在我的电脑上,使用移动模式的 Chrome 浏览器

enter image description here

有人知道这是怎么回事吗?任何关于它是如何发生以及如何修复它的想法将不胜感激。

最佳答案

我找到了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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com