Html Chrome和Firefox中的字体显示不同

我对网络开发有点陌生

我创建了一个菜单，但其按钮宽度因浏览器（Firefox或Chrome）而异

在Firefox中，我们可以看到菜单最后一个按钮的末尾与下面的div对齐。我们还可以理解，按钮的宽度为136.5px

然而，在Chrome中，字体更粗体，菜单端向前推了一点。这里，按钮的宽度是139.281px

这是网站，菜单位于顶部：

这是菜单的HTML和CSS代码

.navigator{
保证金：0；
填充：0；
显示器：flex；
左侧填充：39px；
背景：#8C9BAA；
}
李先生{
显示：内联块；
位置：相对位置；
z指数：100；
}
李安先生{
文字装饰：无；
字体大小：15px；
显示：块；
线高：50px；
填充：2px27.75px 0px；
-webkit转换：所有0.2都易于输入输出0；
-moz转换：所有0.2秒均为0秒；
-o型转换：所有0.2秒缓进输出0秒；
-ms转换：所有0.2秒缓进缓出0秒；
过渡：所有0.2秒缓进缓出0秒；
}
.navigator li a:hover、.navigator li:hover>a{
颜色：#fff；
背景：7AAFD1；
}
.导航器ul{
显示：无；
保证金：0；
填充：0；
宽度：170px；
位置：绝对位置；
左：0px；
}
李先生{
显示：块；
浮动：无；
背景：无；
保证金：0；
填充：0；
}
李国宝先生{
字体大小：12px；
字体大小：粗体；
显示：块；
颜色：#7979；
左边框：3px实心#ffffff；
背景：#fff；
线高：42px；
转换：0s；
}
.navigator ul li a:hover，.菜单ul li:hover>a{
背景：#efef；
左边框：3倍实心#834；
颜色：#12303D；
}
.navigator li:悬停>ul{
显示：块；
}
.领航员{
左：149px；
顶部：0px；
}
#在{
颜色：#fff；
背景：7AAFD1；
}
.子菜单{
边框：1px实心#ddd；
边框顶部：0px；
左边框：0px；
盒影：3px5px5px-5px#3b3b；
}
.导航者秒{
保证金：0；
填充：0；
显示器：flex；
左侧填充：39px；
背景：#d1d1；
}
.李二{
显示：内联块；
位置：相对位置；
z指数：80；
}
.领航员二李a{
字号：600；
文字装饰：无；
字体大小：13px；
显示：块；
颜色：#4a4a4a；
线高：40px；
填充：0px 35.3px；
-webkit转换：所有0.2都易于输入输出0；
-moz转换：所有0.2秒均为0秒；
-o型转换：所有0.2秒缓进输出0秒；
-ms转换：所有0.2秒缓进缓出0秒；
过渡：所有0.2秒缓进缓出0秒；
}
#伊尼{
颜色：#fff；
背景：7AAFD1；
}
.Navigator第二个li a:悬停，.Navigator第二个li:悬停>a{
颜色：#fff；
背景：7AAFD1；
}
.第二航海家{
显示：无；
保证金：0；
填充：0；
宽度：170px；
位置：绝对位置；
左：0px；
}
第二名{
显示：块；
浮动：无；
背景：无；
保证金：0；
填充：0；
}
.领航员{
字体大小：13px；
字体大小：粗体；
显示：块；
颜色：#7979；
左边框：3px实心#ffffff；
背景：#fff；
线高：42px；
转换：0s；
}

更新：这是因为

---

我用您当前的

无衬线

字体复制了您的结果。当我将字体更改为

monospace

时，也发生了这种情况

我相信你最好使用非系统字体。例如，我想看看典型的谷歌字体会发生什么，比如，我发现使用它时不存在这个问题

---

顺便说一下，这个网站做得不错。看起来不错。TSM！TSM！TSM

*{margin:0；padding:0；}

将这一行放在css文件的顶部。它帮助我使用不同的浏览器。让我知道这对你有没有帮助

.navigatorSecond li {
    display: inline-block;
    position: relative;
    z-index:80; 
}

---

使用左浮动代替显示内联块。这不会有什么不同。或者使用.navigatorsecond{font size=0；}

在我的屏幕上都可以。我电脑上的Chrome按钮宽度为136.281。字体呈现的差异通常可以忽略不计。这很奇怪。。。所以它既不是136.5也不是139.281。差别不大。。这可能与屏幕分辨率有关。@juanfran我在不同浏览器之间复制了你的发现。有关更多详细信息和可能的解决方案，请参见下文。非常感谢您的回答！也许这是非常贪婪的，但我不知道是否值得包括一个图书馆只是为了这个问题。这个场地正在建设中，所以完工后看起来会好得多。再次谢谢你：谢谢你！只要知道，如果排版是一个问题，建议使用一个自定义的网页字体，这是浏览器之间的一致性优化。最后，我决定这样做！非常好用^^谢谢！pd:C9将再次上升。。。有希望地