浏览器渲染问题

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>

如果这不起作用，一种快速的解决方法也可能是在子项（margin-left: -1px）上添加1px负边距