在个人网站上工作时，发现每当点击任何HTML锚时，都会完全破坏网站，或者根本无法链接到网页上的适当位置。通常出现在Firefox上，但该网站在Edge和Chrome上运行良好。
该网站的实时版本如下：http://smithchrisgraphics.com/
这个问题在使用Firefox时最为明显；当我使用Edge测试我的网站时，我没有遇到任何问题。我试着减少HTML和CSS，看看是否能找出问题所在，但我仍然不知道是什么导致了这个错误。任何找出问题所在的帮助都会有所帮助。我删除了所有外部js文件。
@charset "UTF-8";
/* CSS Document */
html
{
overflow-x:hidden;
scroll-behavior: smooth;
}
body
{
min-height: 500vh;
max-width: 100vw;
width: 100%;
font-family: 'Roboto Slab', serif;
overflow: hidden;
position: absolute;
left: -13px;
z-index: -3;
/*outline: 1px solid red;*/
}
.displaySection
{
position: relative;
top: 100vh;
left: 0;
width: 100%;
background-color: red;
padding: 20px 0 20px;
margin: 5px 0 5px 5px;
min-height: 100vh;
overflow-y: visible;
overflow-x: hidden;
}
a
{
text-decoration: none;
}
ul
{
list-style: none;
}
hr
{
margin: 50px 10px 10px 10px;
}
#wrapper
{
width:100vw;
}
#NameDrop
{
position: relative;
top: 50vh;
transform: translateY(-60%);
list-style:none;
margin:0;
padding:0;
text-align:center;
z-index: 5;
}
#NameDrop ul
{
text-decoration-line: none;
list-style-type: none;
margin: 0 auto;
left: 40%;
}
#NameDrop ul li
{
text-decoration-line: none;
display: inline;
text-align: center;
width: 25%;
margin: 0 auto;
}
#NameDrop li a
{
display:inline-block;
position: relative;
padding:10px 20px;
left: -20px;
color: black;
text-decoration-line: none;
font-size: 14pt;
border-radius: 30px;
opacity: 1;
/* Safari 4.0 - 8.0 */
-webkit-animation-name: SlowFade;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0.7s;
-webkit-animation-iteration-count: 1;
/* Standard syntax */
animation-name: SlowFade;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0.7s;
animation-iteration-count: 1;
animation-direction: forwards;
animation-fill-mode: forwards;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
-mozilla-transition: 0.3s;
transition: 0.3s;
}
#NameDrop li a:hover
{
background-color:rgba(151,0,2,1.00);
color: white;
text-decoration-line: none;
}<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<!-- External CSS Files -->
<link href="css/home.css" rel="stylesheet" type="text/css">
<!-- Need script for anchors due to HTML5 Bug on browsers -->
<script>
function snapToAnchor(anchor)
{
document.getElementById(anchor).scrollIntoView(true);
}
</script>
</head>
<body>
<div id="NameDrop">
<ul>
<li><a href="#link01">About</a></li>
<li><a onclick="snapToAnchor('link02')">Design</a></li>
<li><a onclick="snapToAnchor('link03')">Experience</a></li>
<li><a href="#link04">Education</a></li>
<li><a onclick="snapToAnchor('link05')">Contact</a></li>
</ul>
</div>
<!-- Each section should take up a minimum of at least 1 full screen -->
<div id="link01" class="displaySection">
</div>
<div id="link02" class="displaySection">
</div>
<div id="link03" class="displaySection">
</div>
<div id="link04" class="displaySection">
</div>
<div id="link05" class="displaySection">
</div>
</body>
</html>如果有任何额外的细节我可以提供帮助，或者你有任何线索可能是什么导致的，请告诉我！
这是由body标记上的overflow: hidden样式引起的，当删除锚链接时，锚链接可以正常工作。
这可能与这个问题有关为什么当使用锚链接时，这个页面布局会中断
half content似乎向上移动，因为它包含内部设置为溢出：hidden&具有正在剪辑的内容因此