兄弟，有很多过渡和样式只能在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像素，而是看到一条看起来更细的黑色线条，可能是一个屏幕像素宽。当缩放比例增加或减少时，这条黑色线条可能会消失，或者显示在右/下边框而不是左/上边框。这就好像计算边框实际位置的算法需要，例如，n个屏幕像素用于一个CSS像素，并采取中点。我还没有找到任何解释什么算法使用虽然。
无论如何，在这种实际情况下可能有帮助也可能没有帮助的一个观察结果是，如果用边距代替边框，那么就没有黑线。

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

我以前遇到过这个问题，在某些情况下，当我们使用绝对位置，所以它不适合在一些浏览器的相对框，所以这个问题的解决方案是，你可以添加大纲属性在元素中有绝对位置.
请检查以下代码：-

.child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: lightcoral;
    outline: 1px solid #fff;
}

只要用上面的代码替换你的子元素css，让我知道它是否有效。