【发布时间】：2021-09-10 14:07:31
【问题描述】：
我刚刚为我的团队和我正在实施的 Web 应用程序设计了一个页脚。当我加载 html 文件并访问它们时，页脚看起来很好。 但是，当我的一位队友这样做时，页脚根本没有样式属性，而是出现在页面的右侧。
调试起来相当困难，因为它适用于我，但我收到了标题中的错误消息。
这是我的 html 代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Hugo 0.83.1">
<title>Central SignIn</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/sign-in/">
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous" />
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="footerSmallPage.css" media="all">
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/docs/5.0/examples/sign-in/signin.css" rel="stylesheet">
</head>
<body class="text-center">
<main class="form-signin">
<form name="f">
<h1 class="h3 mb-3 fw-normal">Central Service Sign in</h1>
<!-- Email input field -->
<div class="form-floating">
<input name= "username" type="email" class="form-control"
id="floatingInput"
placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<!-- Password input field -->
<div class="form-floating">
<input name="password" type="password" class="form-control"
id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<!-- Login button -->
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
</form>
<form action="/home" method="get">
<input type="submit" name="Go to the overview" id="overviewButton" />
</form>
<!-- Button for Navigation - Opens modal on click -->
<button type="button"
class="btn btn-dark al"
data-toggle="modal"
data-target="#navigation">
Navigation
</button>
<!-- Modal initialization -->
<div class="modal fade"
id="navigation">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">
Navigation</h2>
<button type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">
X</span>
</button>
</div>
<!--Modal Text-->
<div class="modal-body">
<p style="font-size:20px"> Copyright © 2021 </p>
<p> Gruppe20 Web & Data Engineering </p>
<p> All rights reserved. </p>
<br>
<p style="font-size:20px;"> <h3> Authors: </h3> </p>
<p> Emily Vorderwuelbeke </p>
<p> Severin Burghart </p>
<p> Ludwig Loggenkamp </p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<br>
<br>
<p> Copyright © 2021 - Gruppe20 Web & Data Engineering - All rights reserved </p>
<p> Authors: Emily Vorderwuelbeke - Severin Burghart - Ludwig Roggenkamp</p>
</footer>
</body>
<script>
function handleSubmit(event) {
event.preventDefault();
const data = new FormData(event.target);
const value = Object.fromEntries(data.entries());
const options = {
method: 'POST',
body: JSON.stringify(value)
};
console.log(value);
console.log(options)
fetch( 'login', options )
.then( response => document.cookie =
"Authorization="+response.headers.get("Authorization")+";path=/;expiration=0;");
}
const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);
</script>
</html>
这里是css文件（它与html页面在同一个文件夹中）
@media screen and (max-width: 768px) {
.footer{
visibility: hidden;
display: none;
}
}
.footer {
position: absolute;
bottom: 0;
padding-bottom: 100px;
width: 100%;
overflow: hidden;
color: black;
height: 177px;
text-align: center;
background-image: url(footer-image.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
【问题讨论】：