Javascript Safari浏览器HTML CSS存在问题

我刚刚遇到一个问题。我的Chrome显示我的导航，如下所示：

但我的狩猎之旅是这样展示的：

代码：

---

找不到此问题的任何修复程序。有什么想法吗？

通过添加

显示：内联块修复

到

nav a{}

可以尝试显式

字体大小，而不是让浏览器来决定“x-large”的含义。@Pointy不是问题您尝试过了吗？事实上，你试过什么？你做了什么实验？只是把它设置成多个固定的大小。有点糟糕的情况，因为这是一个浏览器问题，但我不能离开它，因为它可能会被mac用户看到。这不是一个浏览器问题-这是一个不同。谁说哪一种是对的，哪一种是错的？您是否尝试指定字体系列并检查实际使用的字体？另外，您是否确保在每个浏览器上都能100%查看？浏览器倾向于“记住”每个站点的任何缩放设置哇。。。这将如何改变文本的大小？除非你发布的图像不是问题的真实反映（Safari中的文本看起来比Chrome中的文本大）。。。哦。。。哦，等等-这是在这里嵌入图像的人工制品！！看起来字体大小真的不一样！
#header{
    display: grid;
    width: 70%; margin: 0 auto;
    margin-top: 1%;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 'header-left header-right';
    text-align: center;
    font-size: x-large;
    font-weight: bold;
    color: grey;
    margin-top: 2em;

}
#header-left{
    grid-area: 'header-left';
    text-align: left;
    color: white;
}

#header-right{
    grid-area: 'header-right';
}
#header-right a {
    text-decoration: none;
    color: grey;
}
#about h2,p{
    text-align: left;
}