修复了导航栏问题

问题描述

我是 Web 开发的新手，我正在尽我所能发布我的第一个网站。我今天关于堆栈溢出的第一个问题是我想要一个固定的导航栏。我制作的那个正在工作……仅在 Chrome 上。对于 Firefox 和 Safari，它突然添加了一个边距顶部，我不知道如何修复它。我写的任何 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 navbar result Google navbar result

解决方法

我认为您只需要在 css 中添加一些全局重置即可。看看这个github它有关于如何下载的说明或者，您可以单击“master”分支中显示的“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

fixed html navbar navbar