html - 在Chrome中可见外部div背景周围的内部div

这发生在布局中，当视图的比例或宽度发生变化时，该布局现在在普通视图和设备模式（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中的示例都不会感到困惑：

常见的解决方案与SVG中形状接触接缝的处理方式非常相似-添加光效果以遮盖接触区域（通过outline或box-shadow），或使形状稍微重叠（margin-top: -1px对于您的原始案例就足够了）。

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