gpt4 book ai didi

html - 外部 div 背景在 Chrome 中可见 arround 内部 div

转载 作者:行者123 更新时间:2023-11-28 14:01:13 25 4
gpt4 key购买 nike

这发生在布局中,当 View 的比例或宽度发生变化时,布局现在在普通 View 和设备模式 (F12) 中都是布局。我创建了一个简约的测试用例,其中它也在设备模式下表现出来。请帮我去掉这些条纹。

图片:

一般标记:https://imgur.com/62rKUed

测试用例(Chrome F12 设备模式):https://imgur.com/NkXmpmj.png

  

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
header {background-color:green}
section {background-color: blue}
footer {background-color: aquamarine}
.inner-div {
background-color:white;
}
</style>
</head>
<body>
<header>Header</header>
<section>
Section
<div class="inner-div">Inner</div>
</section>
<footer>Footer</footer>
</body>
</html>

片段:

header {background-color:green}
section {background-color: blue}
footer {background-color: aquamarine}
.inner-div {
background-color:white;
}
<header>Header</header>
<section>
Section
<div class="inner-div">Inner</div>
</section>
<footer>Footer</footer>

最佳答案

这最终是特定于设备/浏览器的东西 - 例如,无论配置如何,我都不会在 Chromium 中使用您的示例: enter image description here

一个常见的解决方案与 SVG 中形状接触接缝的处理方式非常相似——添加光效来遮盖接触区域(通过 outlinebox-shadow ),或者使形状稍微重叠(margin-top: -1px 就足以满足您的原始情况)。

关于html - 外部 div 背景在 Chrome 中可见 arround 内部 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57711062/

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