Html Chrome怪异的CSS问题，在Firefox上运行良好

我想知道为什么Chrome和Firefox在呈现CSS方面存在显著差异。如果是铬元素，则子元素不具有全宽和全高（在子元素的顶部和左侧可以看到父元素的黑色）。对于Firefox，边缘是平滑的，子对象的尺寸与父对象的尺寸相同。我不知道为什么会这样

以下是Chrome和Firefox上的屏幕截图，用于演示：

铬：

火狐：

下面是我的代码：

*{
保证金：0；
填充：0；
}
.家长{
位置：相对位置；
宽度：200px；
高度：200px；
边框：10px纯白；
背景色：黑色；
}
.孩子{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
背景颜色：浅珊瑚；
}

内容

嘿，兄弟，有许多转换和样式只在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个屏幕像素，并取中点。不过，我还没有找到任何关于使用什么算法的解释

无论如何，在这种实际情况下，一个可能有帮助也可能没有帮助的观察结果是，如果用边距替换边界，那么就没有黑线

*{
保证金：0；
填充：0；
}
.家长{
位置：相对位置；
宽度：200px；
高度：200px；
背景色：黑色；
/*边框：10px纯白*/
利润率：10px；
}
.孩子{
位置：绝对位置；
最高：0%；
左：0%；
身高：100%；
宽度：100%；
背景颜色：浅珊瑚；
}

内容

对于我来说，在Chrome和Firefox（Mac）上都是一样的。对于我来说，在Chrome（WIndows 10）上，它取决于缩放级别，我是否获得黑色轮廓。我怀疑这只会发生在高清屏幕上。大多数时候，它都在那里，我还没有找到任何解决方案。你不认为这是需要解决的问题吗？因为Firefox是按照它实际应该发生的方式来做的。大家都同意，这不是人们期望发生的事情，而且在任何情况下，即使在同一个浏览器上也不一致。我认为这只会发生在高清显示器上（CSS像素由一个以上的屏幕像素表示），但我没有找到关于浏览器（和/或我认为的各种处理器）如何在所有情况下进行映射的描述。我已经给出了一个答案，我承认它是不完整的，因为它没有被证明是完整的解释，只有观察。谢谢！但那没用。请看我的代码，我没有使用任何此类属性。您好，在过去6年或更长时间内发布的浏览器版本中不需要这些前缀。看[链接]太棒了！多年来，我一直在使用chrome，认为其他浏览器将需要前缀。现在我有很多理由切换到Firefox。谢谢，伙计。