修复导航条问题

Question

我是网站开发的新手，我正在尽我所能发布我的第一个网站。我今天关于堆栈溢出的第一个问题是，我想要一个固定的导航条。我做的那个起作用了……只支持Chrome浏览器。至于Firefox和Safari，它莫名其妙地增加了一个margin-top，我不知道该怎么修复它。我写的css规则是否与这些浏览器不兼容?我还没有添加任何媒体查询规则。

html {
height: 100%;
margin: 0 !important;
clear: both;
}
body {
background: url('../img/img_fond.svg');
background-repeat: no-repeat;
background-size: cover;
position: relative;
min-height: 100%;
margin: 0 !important;
overflow-x: hidden;
clear: both;
}
.logo {
width: 128px;
height: 127px;
position: fixed;
margin: 0 !important;
z-index: 7;
}
.dot {
height: 28px;
width: 28px;
background-color: rgb(255, 255, 255);
border-radius: 50%;
display: inline-block;
}
/* Navbar */
nav {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
background-color: #364D5C;
font-size: 20px;
position: fixed;
width: 100%;
overflow: hidden;
height: 100px;
font-family: 'Poppins';
box-shadow: 0px 4px 7px 0px rgba(54, 77, 92, 0.7);
margin: 0 !important;
z-index: 6;
}
ul {
display: flex;
align-items: center;
justify-content: center;
}
/* Links */
li {
display: inline;
}
/* unvisited link */
a:link, a:visited {
color: rgb(243, 240, 240);
padding-right: 25px;
padding-left: 25px;
text-align: center;
text-decoration: none;
display: inline;
}
/* mouse over link */
a:hover {
text-decoration: none;
}
/* selected link */
a:active {
color: blue;
}

<a href="./index.php">
<img class="logo" src="./img/logo/logo.svg" alt="Logo de l'association Amitie Cevenole">
</a>

<nav>
<!-- Logo de l'association -->
<ul>
<li>
<a href="./index.php">ACCUEIL</a>
</li>
<span class="dot"></span>
<li>
<a href="./apropos.php">NOTRE ASSO</a>
</li>
<span class="dot"></span>
<li>
<a href="./sejours.php">NOS SEJOURS</a>
</li>
<span class="dot"></span>
<li>
<li>
<a href="./inscription.php">S'INSCRIRE</a>
</li>
<span class="dot"></span>
<li>
<a href="./actualites.php">NOTRE ACTUALITE</a>
</li>
<span class="dot"></span>
<li>
<a href="./contact.php">
CONTACT
</a>
</li>
</ul>
</nav>

Safari,Firefox导航条结果Google导航条结果

Answer 1

我认为你只需要在你的css中添加一些全局重置。看看这个github，它有关于如何下载的说明或者你也可以点击"normalize.css"文件显示在"母版"中。分支并复制并粘贴所有这些代码到你的CSS文件中github.com/necolas/normalize.css

也可以检查这个资源…也许这能帮你理清一些事情https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions

或者可以尝试添加margin-top: 0;你不想要的地方https://developer.mozilla.org/en-US/docs/Web/CSS/margin