如何解决修复了导航栏问题
我是 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。