我想知道为什么chrome和Firefox在渲染CSS时会有很大的不同，在chrome的情况下，子元素的宽度和高度都不是完全的（在子元素的顶部和左侧可以看到父元素的黑色），而在Fierefox的情况下，子元素的边缘是光滑的，尺寸和父元素一样。我不知道为什么会这样。以下是chrome和firefox上的屏幕截图（链接，由于名声不高），以演示:

[Google Chrome1][1]:https://i.stack.imgur.com/ot4gl.png

[Mozilla Firefox2][2]:https://i.stack.imgur.com/jaqgj.png

下面是我的代码:

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

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .parent {
    position: relative;
    width: 200px;
    height: 200px;
    border: 10px solid white;
    background-color: black;
  }

  .child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: lightcoral;
  }
</style>

笔链接:[codepen3][3]:https://Codepen.io/deepakjangra/pen/bgwljaj在firefox和chrome中打开这支笔，区别清晰可见。

我只想知道为什么会发生这种情况，如何才能修复它，使它在所有浏览器上看起来都一样。

PS:当可用时使用硬件加速

这是我的第一个问题。所以请忽略像格式化和放置链接的错误。