html - 浏览器渲染问题

Question

我注意到浏览器之间存在一个微小的渲染问题，我想知道是否有人知道如何修复它。

当浏览器全屏或最大化时不会发生这种情况，而只会在浏览器调整为较小的窗口时发生。我现在已经在 Chrome、Firefox 和 Opera 上注意到它了。

image of rendering issue

所以我这里有一个嵌套的 DIV。这是我的 Scss 代码，因此您可以看到我在描述什么:

<div class="parent">
    <div class="child"></div>
</div>


.parent {
   width: 600px;
   height: 400px;
   border: 1px solid black;
   margin: auto;
   padding: 0;
   overflow: hidden;

   .child{
       width: 100%;
       height: 50px;
       background: #000;
    }
  }

您会在图像中看到父 div 和子 div 之间有一个小的空白区域。

空白处用红色圈出。

那么有人知道是什么原因导致这个小问题吗？

Answer 1

这可能是由于您的 html 中父项和子项之间的空格引起的。您可以通过删除所有空格并查看它是否解决了问题来对此进行测试，所以不要这样做:

<div>

   <h1>Title here</h1>

</div>

你可以试试:

<div><h1>Title here</h1></div>

如果这不起作用，一个快速修复可能是在子项上添加 1px 负边距(margin-left: -1px)