css - Navbar 在 Firefox 和 Chrome 的不同位置使用 anchor 链接和 "position sticky"位置页面

Question

这是我目前所拥有的。它将在 Firefox 开发人员版和移动 chrome 上的导航栏下方显示链接目标“CONTACT INFO”。 并在 Edge 和 Chrome 的导航栏下停止目标。 不知道为什么会有不同的位置以及正确的位置是什么。我的代码中是否缺少某些内容？

html {
  scroll-behavior: smooth;
}

body {
  background-image: url("img/topography.svg"), linear-gradient(110deg, #4a95c5, darkgrey);
  /*Old Color: #0f83ca*/
  font-size: 30px;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

p {
  margin: 0;
}

.maindiv {
  min-height: 200vh;
  display: grid;
  grid-gap: 0px;
  grid-template-columns: [start] minmax(max-content, 1fr) [content-start] minmax(70vw, 70vw) [content-end] minmax(max-content, 1fr) [end];
  grid-template-rows: minmax(200px, min-content) minmax(20px, max-content) minmax(80vh, auto) minmax(150vh, auto) minmax(100px, min-content);
}

.logo {
  z-index: 0;
  grid-column: start / end;
  background-image: url("img/waves.jpg");
  background-size: cover;
  background-position: 0, 0, 0, 0;
  /*border: 1px solid #000000;*/
}


/*Menubar*/

.header {
  display: grid;
  grid-column: start / end;
  background-color: #0f83ca;
  border: 1px solid #000000;
  position: sticky;
  top: 0;
  box-shadow: 0px 3px 10px rgba(50, 50, 50, 0.75);
  /*font-size: 0.5em; */
}

.menu {
  justify-self: center;
  margin: 0;
  padding: 0;
  font-weight: 900;
  list-style: none;
  font-size: 0;
  text-align: center
}

a {
  text-decoration: none;
  color: black;
}

.knapp {
  font-size: 18px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  grid-template: inherit;
  display: inline-block;
  position: relative;
}

.knapp:hover,
.active {
  background-color: #0f83ca;
  box-shadow: inset 0 0 3px black;
}

.knapp:hover::after,
.active::after {
  content: '';
  border-bottom: 3px solid #25b6de;
  left: 0px;
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
}

.bodydiv {
  display: grid;
  grid-template: inherit;
  padding-top: 40px;
  justify-self: center;
  grid-column: content-start / content-end;
}

.bodydiv_under {
  display: grid;
  grid-template: inherit;
  grid-column: content-start / content-end;
  background-image: url("https://source.unsplash.com/random/800x600/?fishing");
  background-size: cover;
}

.body2div {
  justify-self: center;
  grid-column: content-start / content-end;
}

.paragraph3 {
  /*padding-top: 60px;*/
}

.footer {
  grid-column: start / end;
}

<div class="maindiv">
  <div class="logo"></div>
  <header class="header" id="wrapper">
    <ul class="menu" id="myDIV">
      <a href="#">
        <li class="knapp knapp1 active">HOME</li>
      </a>
      <a href="#">
        <li class="knapp knapp2">APARTMENT</li>
      </a>
      <a href="#">
        <li class="knapp knapp3">GALLERY</li>
      </a>
      <a href="#">
        <li class="knapp knapp4">SEA MAP</li>
      </a>
      <a href="#example">
        <li class="knapp knapp5">FISHING GEAR</li>
      </a>
      <a href="#example">
        <li class="knapp knapp5">CONTACT</li>
      </a>
    </ul>
  </header>
  <div class="bodydiv">
    <p class="paragraph2">
      <div class="bodydiv_under"></div>
  </div>
  <div class="body2div">
    <a id="example">
      <p class="paragraph3" id="block">CONTACT INFO:</p>
    </a>
  </div>
  <footer class="footer">
    <p class="paragraph4">Her kommer en footer</p>
  </footer>
</div>

Answer 1

主要是因为如何内联<a>标签在每个浏览器中呈现是不同的。这些浏览器似乎有不同的默认 line-height影响 <a id="example">...</a> 的值元素的高度不同。

作为快速解决方案，我申请了 display: block在 a#example {..} CSS 规则。我还添加了 padding-top: 70px使文本不在菜单下滑动。试试下面，看看它是否有效:

html {
  scroll-behavior: smooth;
}

body {
  background-image: url("img/topography.svg"), linear-gradient(110deg, #4a95c5, darkgrey);
  /*Old Color: #0f83ca*/
  font-size: 30px;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

p {
  margin: 0;
}

.maindiv {
  min-height: 200vh;
  display: grid;
  grid-gap: 0px;
  grid-template-columns: [start] minmax(max-content, 1fr) [content-start] minmax(70vw, 70vw) [content-end] minmax(max-content, 1fr) [end];
  grid-template-rows: minmax(200px, min-content) minmax(20px, max-content) minmax(80vh, auto) minmax(150vh, auto) minmax(100px, min-content);
}

.logo {
  z-index: 0;
  grid-column: start / end;
  background-image: url("img/waves.jpg");
  background-size: cover;
  background-position: 0, 0, 0, 0;
  /*border: 1px solid #000000;*/
}


/*Menubar*/

.header {
  display: grid;
  grid-column: start / end;
  background-color: #0f83ca;
  border: 1px solid #000000;
  position: sticky;
  top: 0;
  box-shadow: 0px 3px 10px rgba(50, 50, 50, 0.75);
  /*font-size: 0.5em; */
}

.menu {
  justify-self: center;
  margin: 0;
  padding: 0;
  font-weight: 900;
  list-style: none;
  font-size: 0;
  text-align: center
}

a {
  text-decoration: none;
  color: black;
}

a#example {
  display: block;
  padding-top: 70px
}

.knapp {
  font-size: 18px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  grid-template: inherit;
  display: inline-block;
  position: relative;
}

.knapp:hover,
.active {
  background-color: #0f83ca;
  box-shadow: inset 0 0 3px black;
}

.knapp:hover::after,
.active::after {
  content: '';
  border-bottom: 3px solid #25b6de;
  left: 0px;
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
}

.bodydiv {
  display: grid;
  grid-template: inherit;
  padding-top: 40px;
  justify-self: center;
  grid-column: content-start / content-end;
}

.bodydiv_under {
  display: grid;
  grid-template: inherit;
  grid-column: content-start / content-end;
  background-image: url("https://source.unsplash.com/random/800x600/?fishing");
  background-size: cover;
}

.body2div {
  justify-self: center;
  grid-column: content-start / content-end;
}

.paragraph3 {
  /*padding-top: 60px;*/
}

.footer {
  grid-column: start / end;
}

<div class="maindiv">
  <div class="logo"></div>
  <header class="header" id="wrapper">
    <ul class="menu" id="myDIV">
      <a href="#">
        <li class="knapp knapp1 active">HOME</li>
      </a>
      <a href="#">
        <li class="knapp knapp2">APARTMENT</li>
      </a>
      <a href="#">
        <li class="knapp knapp3">GALLERY</li>
      </a>
      <a href="#">
        <li class="knapp knapp4">SEA MAP</li>
      </a>
      <a href="#example">
        <li class="knapp knapp5">FISHING GEAR</li>
      </a>
      <a href="#example">
        <li class="knapp knapp5">CONTACT</li>
      </a>
    </ul>
  </header>
  <div class="bodydiv">
    <p class="paragraph2">
      <div class="bodydiv_under"></div>
  </div>
  <div class="body2div">
    <a id="example">
      <p class="paragraph3" id="block">CONTACT INFO:</p>
    </a>
  </div>
  <footer class="footer">
    <p class="paragraph4">Her kommer en footer</p>
  </footer>
</div>