Javascript 我的网页在firefox中加载时向下滚动
我刚刚开始从头开始构建一个网站，在firefox中遇到了一个奇怪的bug，它会将页面向下滚动到第一个div，并跳过其边距Javascript 我的网页在firefox中加载时向下滚动,javascript,html,css,firefox,Javascript,Html,Css,Firefox,我刚刚开始从头开始构建一个网站，在firefox中遇到了一个奇怪的bug，它会将页面向下滚动到第一个div，并跳过其边距 我不是在请求firefox的修复。我只是想寻求帮助找到一个解决办法 我已经尝试使用javascript将所有可能的滚动值设置为0，但运气不好。我认为这个问题是由我对div的奇怪理解造成的，但我不是舒尔（舒尔）（很明显）知道如何准确地解决它 为了复制，我使用firefox 88.01（最新版本26.05.21） HTML: <!DOCTYPE html> <
我不是在请求firefox的修复。我只是想寻求帮助找到一个解决办法
我已经尝试使用javascript将所有可能的滚动值设置为0，但运气不好。我认为这个问题是由我对div的奇怪理解造成的，但我不是舒尔（舒尔）（很明显）知道如何准确地解决它 为了复制，我使用firefox 88.01（最新版本26.05.21）
HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Demo - Start</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="assets.css">
<script>
window.onload = function () {
load();
}
window.onresize = function () {
resize();
}
function resize() {
document.getElementById("foreground").style.height = window.innerHeight - document.getElementById("titlebar").offsetHeight + "px";
document.getElementById("foreground").style.top = document.getElementById("titlebar").offsetHeight + "px";
document.getElementById("background").style.top = document.getElementById("titlebar").offsetHeight + "px";
document.getElementById("titlebar").style.paddingLeft = ((document.getElementById("body").offsetWidth - (document.getElementById("title_element_1").offsetWidth + document.getElementById("title_element_2").offsetWidth + document.getElementById("title_element_3").offsetWidth + document.getElementById("title_element_4").offsetWidth)) / 2 + "px");
}
function load() {
resize();
}
</script>
</head>
<body id="body">
<div id="titlebar">
<a id="title_element_1" class="active" href="#start">Start</a>
<a id="title_element_2" href="#tour">Tour</a>
<a id="title_element_3" href="#details">Details</a>
<a id="title_element_4" href="#darkmode">Darkmode</a>
</div>
<div id="foreground">
<div id="start" class="content">
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
</div>
<div class="content">
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
</div>
<div id="end" class="content">
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
<p>Demo text . . .</p>
</div>
<div style="height: 100px;">
</div>
</div>
<img id="background" src="background.png" alt="Background">
</body>
</html>
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: gray;
}
#titlebar {
background-color: #333;
overflow: hidden;
position: fixed;
top: 0px;
width: 100%;
z-index: 99;
box-shadow: 0px 2px 6px 6px rgba(0, 0, 0, 0.3);
}
#titlebar a {
color: #f2f2f2;
float: left;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#titlebar a:hover {
background-color: lightgrey;
color: black;
}
#titlebar a.active {
background-color: grey;
color: black;
}
#titlebar a.active:hover {
background-color: lightgrey;
color: black;
}
#background {
z-index: 0;
position: fixed;
width: 100%;
}
#foreground {
z-index: 1;
position:fixed;
width: 100%;
height: 100%;
overflow-y: scroll;
scrollbar-color: #555555 #333;
}
.content {
padding: 50px;
display: block;
overflow: auto;
margin-top:100px;
margin-left:20%;
margin-right: 20%;
background-color: rgba(51,51,51,0.9);
color: #f2f2f2;
}
#start {
border-top-right-radius: 50px;
border-top-left-radius: 50px;
}
#end {
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
}
我将开始和结束ID更改为内容的子类，出于某种原因，它修复了它。我将结束这个问题。这不会发生在我身上。你确定你没有在
which.html#startid=“start”