Chrome 奇怪的 CSS 问题，在 Firefox 上工作正常

如何解决Chrome 奇怪的 CSS 问题，在 Firefox 上工作正常

我想知道为什么 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， firefox 的情况也是如此，（许多转换适用于 firefox 但不适用于 chrome）所以问题是，chrome 和 firefox 具有一些不同的属性，因此您必须在官方文档或谷歌上搜索以检查哪些属性适用于 chrome 以及哪些将在 Firefox 上运行

希望这是有道理的

我将附上一个代码片段，显示不同浏览器的不同过渡属性

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 */
   

}

这些是不同浏览器的一些过渡属性，这只是一个例子 这些行的工作原理相同，但在各自的浏览器上

快乐编码！！

,

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

虽然我不完全理解为什么这会发生在某些浏览器而不是其他浏览器上，以及为什么它发生在某些缩放级别而不是其他级别（至少在我笔记本电脑上的 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>