Chrome 奇怪的 CSS 问题，在 Firefox 上运行良好答案

【问题标题】：Chrome weird CSS issue, works fine on FirefoxChrome 奇怪的 CSS 问题，在 Firefox 上运行良好
【发布时间】：2021-01-01 14:35:51
【问题描述】：

我想知道为什么 Chrome 和 Firefox 在呈现 CSS 方面存在显着差异。在 Chrome 的情况下，子元素没有占据完整的宽度和高度（可以在子元素的顶部和左侧看到父元素的黑色）。在 Firefox 的情况下，边缘是平滑的，并且子级的尺寸与父级相同。我不知道为什么会这样。

这些是用于演示的 Chrome 和 Firefox 上的屏幕截图：

铬：

火狐：

下面是我的代码：

* {
  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;
}

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

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

PS：启用时使用硬件加速

【问题讨论】：

Chrome 和 Firefox（在 Mac 上）对我来说都是一样的。
对于 Chrome (WIndows 10) 上的我来说，我是否得到黑色轮廓取决于缩放级别。我怀疑这只会发生在高清屏幕上。
大多数时候，它就在那里，我还没有找到任何解决方案。你不认为这是需要修复的东西吗？因为 Firefox 是按照它实际应该发生的方式来做的。
同意，这不是人们期望发生的事情，而且在任何情况下即使在同一个浏览器上也不一致。我认为它只发生在更高清晰度的显示器上（其中一个 CSS 像素由多个屏幕像素表示），但我还没有找到关于浏览器（和/或我想的各种处理器）如何在所有情况下进行映射的描述。我已经提出了一个答案，我认为它是不完整的，因为它没有经过验证的完整解释，只有观察。

标签： html css google-chrome firefox frontend

【解决方案1】：

兄弟，有很多过渡和样式只能在 chrome 上运行，而不能在 Firefox 上运行， firefox 也是如此，（许多转换在 firefox 上有效，但在 chrome 上无效）所以事情是，chrome 和 firefox 有一些不同的属性，所以你必须在官方文档或谷歌上搜索以检查哪些属性可以在 chrome 上工作，哪个将在 Firefox 上工作

希望这是有道理的

我将附上一个代码 sn-p，它显示不同浏览器的不同转换属性

text.identity{
   transform: translate(74px,0px);
   -ms-transform: translate(74px,0px); /* IE 9 */
   -webkit-transform: translate(74px,0px); /* Safari and Chrome */
   -moz-transform: translate(74px,0px); /* Firefox */
   -o-transform: translate(74px,0px); /* Opera */

}

这些是针对不同浏览器的一些转换属性，这只是一个示例这些行的工作原理相同，但在各自的浏览器上

编码愉快！！

【讨论】：

谢谢！但这没有帮助。查看我的代码，我没有使用任何此类属性。
您好，过去 6 年或更长时间发布的浏览器版本不需要这些前缀。见[链接]caniuse.com/?search=transform
太好了！多年来我一直在使用 chrome，认为其他浏览器需要前缀。现在我有很多理由切换到 Firefox。谢谢，伙计。

【解决方案2】：

似乎出现黑线是因为在父级上设置了边框。

虽然我不完全理解为什么会在某些浏览器而不是其他浏览器上发生这种情况，以及为什么会在某些缩放级别而不是其他浏览器上发生（至少在我笔记本电脑上 Windows 10 上的 Chrome/Edge 上），但我怀疑这是因为浏览器计算 CSS 边框边界的方式。

我们看到的不是一个完整的 CSS 像素，而是看起来更细的，可能只有一个屏幕像素宽度的黑色线条。当缩放增加或减少时，这可能会消失，或者显示在右侧/底部而不是左侧/顶部边框。就好像根据屏幕像素计算边框实际位置的算法采用例如用于一个 CSS 像素的 n 个屏幕像素并采用中点。我还没有找到任何关于使用什么算法的解释。

无论如何，在这种实际情况下可能会或可能不会有帮助的一个观察结果是，如果将边框替换为边距，则没有黑线。

    * {
      margin: 0;
      padding: 0;         
    }

    .parent {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: black;
      /*border: 10px solid white;*/
      margin: 10px;
    }
    
    .child {
      position: absolute;
      top: 0%;
      left: 0%;
      height: 100%;
      width: 100%;
      background-color: lightcoral;
    }

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

【讨论】：