除了Firefox，我的CSS在所有浏览器中的显示方式都不同

我正在firefox上开发，我只是想检查一下它在Chrome上的当前状态。我发现了一个小问题。之后，我在Edge和IE上进行了检查，问题出现在除firefox之外的所有浏览器上

为了说明我的问题，这里有一张图片：

但在其他浏览器中，它们看起来是这样的：

我在检查员那里检查过，FF说它的高度是42像素，而Chrome说是40像素

SCSS：

---

在这种情况下，我尝试对Firefox和Chrome使用单独的CSS规则：

两种浏览器共有的规则：

nav {
position: absolute;
background: rgba(0,0,0,0.75);
display: flex;
flex-direction: row;
justify-content: center;
}

仅对于Firefox：

@-moz-document url-prefix() {
nav{
top: 252px;/*making the height same as chrome*/
}
}

仅适用于铬：

@media and (-webkit-min-device-pixel-ratio:0) {
nav{
top: 254px;
}
}

---

希望有帮助

你已经在检查员那里检查了那两个额外的像素到哪里去了？我打赌这与每个浏览器使用的默认CSS有关。@arielnmz我已经试着检查过了，但我不知道2px是什么。我正在使用边距：0和填充：0。你能设置“行高：32px；”然后再试一次吗？@han如果我尝试过，现在导航栏在两种浏览器中的高度都是42px，但仍然有两个像素的差异，这将非常有用。由于您已经将问题标记为CSS（而不是更少），提供呈现的CSS将非常有用。请注意，所有相关信息都应包含在问题本身中，而不是外部资源中。链接可能会消失，或者用户可能已经被公司规则设置了pastebin防火墙。我可以帮忙，欢迎！！这是一个可怕的答案。Chrome不是webkit浏览器，这不包括IE和Edge的问题！即使它能识别webkit供应商前缀，但在不久的将来也不会如此。所以这个解决方案是暂时的，不可持续的，只是对实际问题的一种敷衍。当使用绝对位置时，这个问题通常会出现。因此，每个浏览器都会显示对位置所做的精确更改，只有firefox略有不同。是的，这可能不是永久的解决方案。但是，在这种情况下，这对我很有效，所以我分享了这个解决方案。

@media and (-webkit-min-device-pixel-ratio:0) {
nav{
top: 254px;
}
}