浏览器渲染问题答案

【问题标题】：Browser Rendering Issues浏览器渲染问题
【发布时间】：2020-04-27 00:51:42
【问题描述】：

我注意到跨浏览器的一个小渲染问题，我想知道是否有人知道如何解决它。

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

所以我这里有一个嵌套的 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 之间有一个小空白。

空白区域用红色圈起来。

那么有谁知道是什么导致了这个小问题？

【问题讨论】：

我记得使用 H1 标签会导致边距问题，我尝试使用溢出修复它：隐藏；但是空白仍然存在。它只有半个像素，但确实有点伤眼睛。同样在调整浏览器大小时，它似乎只发生在某些像素上
向我们展示您的代码的最小工作示例
问题中的代码示例是最小值
我的意思是你能对你的代码做一个 sn-p 以便我们可以看到问题出在哪里，因为你的代码看起来没问题。

标签： html css image google-chrome rendering

【解决方案1】：

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

<div>

   <h1>Title here</h1>

</div>

你可以试试：

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

如果这不起作用，一个快速的解决方法可能是在子元素上添加 1px 负边距 (margin-left: -1px)

【讨论】：

我也试过了，这只发生在调整浏览器大小时，实际上有零空白，就好像浏览器在调整大小时正在移动元素位置一样，但同样只是关于0,5像素
通常当我使用 H1 标签时，我使用溢出：隐藏；隐藏由边距引起的空白，这个空白是不一样的
也通过添加负边距，孩子将与父 div 重叠
好的。这可能会有所帮助：css-tricks.com/forums/topic/white-space-with-browser-resizing 我认为我无能为力。