如何使为Firefox浏览器开发的网站与Safari和Chrome兼容？

首先，我对Web开发不是很有经验。我知道的足够多，但是，当我获得浏览器兼容性时，我会感到挣扎。我试图弄清楚为什么Chrome和Safari在读取我的网站代码时是如此不同。我了解不同的浏览器以不同的方式读取代码，但是一段时间以来我一直在试图找出如何解决此问题的方法，但我无法解决。

我希望至少可以弄清楚为什么菜单在Safari浏览器中位于左侧，而不是在Firefox浏览器中位于右侧。如果我发现了这一点，我认为它可以帮助我弄清楚如何清理其余的代码，使其看起来像在Safari浏览器中一样。我一直在尝试找出如何正确实现Webkit的方法，但是我还不知道该怎么做。

它看起来像这样的原因之一是因为我在PC上使用的是Safari，这可能会使Safari版本看起来像在计算机上一样。以下是登录页面的屏幕截图以及它们在Firefox和Safari上的外观：

Firefox Version (How the website is supposed to look)

Safari Version

这是顶部导航栏的HTML代码。

<nav class="navbar-fixed-top">
<a href="index.html"><img id="logo" src="images/core-logo.png" alt="logo" height="46" width="176"></a>
<div id="wrapper">
    <div class="circle icon">
        <h1 id="menuTitle">Menu</h1>
        <span class="line top"></span>
        <span class="line middle"></span>
        <span class="line bottom"></span>
    </div>
</div>
<div class="navigation">
    <ul id="nav-list">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="team.html">Team</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>
</nav>

这是上面HTML段的CSS代码。

.nav {
    position: fixed;
}

.navbar-fixed-top {
    transition: background-color .25s linear;
    position: fixed;
    top: 0;
    background-color: transparent !important;
    height: 100px;
    width: 100%;
    z-index: 1000;
}

.navbar-fixed-top.scrolled {
    transition: background-color .25s linear;
    position: fixed;
    top: 0;
    background-color: white !important;
    display: initial;
    height: 100px;
    width: 100%;
    z-index: 1000;
}


.navigation {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #ddbe6e;
    height: 100%;
    width: 100%;
    display: none;
    z-index: 999;
    transition: all 1s ease-in 0s;
    font-family: bebas-kai, sans-serif;
}

.navigation ul {
    list-style-type: none;
    text-align: center;
}

.navigation li a {
    color: #222658;
}

.navigation ul li {
    padding: 30px;
}

#nav-list {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
}

.navigation.show {
    display: initial;
    animation: fade-in .5s ease-in;
}

#logo {
    position: absolute;
    top: 50%;
    float: left;
    transform: translateY(-50%);
    margin-left: 50px;
    z-index: 1000;
    user-select: none;
    cursor: pointer;

}

#logo.close {
    position: absolute;
    top: 50%;
    float: left;
    transform: translateY(-50%);
    margin-left: 50px;
    z-index: 1000;
    user-select: none;
    cursor: pointer;
    display: none;

}

#logo.scrolled {
    position: absolute;
    top: 50%;
    float: left;
    transform: translateY(-50%);
    margin-left: 50px;
    z-index: 1000;
    user-select: none;
    cursor: pointer;
}

#wrapper {
    background: transparent;
    display: inline-block;
    position: absolute;
    left: 90vw;
    margin: 20px;
    padding: 10px;
    cursor: pointer;
    z-index: 1000;
}

#menuTitle {
    position: relative;
    top: 2px;
    color: #222658;
    font-size: 25px;
    user-select: none;
    transition: color .25s linear;

}

.circle {
    width: 40px;
    height: 40px;
    position: relative;
    cursor: pointer;
}

.line {
    position: absolute;
    height: 3px;
    width: 70%;
    background-color: #222658;
    border-radius: 10px;
    transition: all cubic-bezier(0.26, 0.1, 0.27, 1.55) 0.35s;
    left: 50px;
}

.top {
    top: 32%;
}

.middle {
    top: 53%;
}

.bottom {
    top: 72%;
}

.icon.close .top {
    top: 48%;
    transform: rotate(45deg);
}

.icon.close .middle, .icon.close .bottom {
    transform: rotate(-45deg);
    top: 48%;
}