在 Django 中编码时，我试图用一些 css 自定义我的网站，但在测试多个网络浏览器时，我发现 css 没有在 Microsoft 或 Chrome 中应用。但它在 Firefox 中工作。 css 文件在所有浏览器中都正确加载，但没有被应用。
我的HTML：
<!DOCTYPE html>
<html>
<head>
{% load static %}
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
</head>
<body>
<label for="label1" id="label1">eeee</label>
{% for card in cards %}
<div class="card">
<img class="card_img" src="{{card.img.url}}" alt="">
<div class="card-content">
<h2 class="card_name" >{{card.name}}</h2>
<p class="card_desc" >{{card.desc}}</p>
</div>
</div>
{% endfor %}
</body>
</html>
我的CSS：
*{
margin: 0;
padding: 0;
}
/* Colors */
$color-primary-white: rgb(1, 240, 240);
/* Colors */
#label1{
color: red;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 50px;
font-family: 'Roboto', sans-serif;
}
.card {
width: 24rem;
height: 36rem;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
position: relative;
color: #fff;
box-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.2);
}
.card_img {
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.9;
transition: opacity .2s ease-out;
}
.card_name {
position: absolute;
inset: auto auto 30px 30px;
margin: 0;
transition: inset .3s .3s ease-out;
font-family: 'Roboto Condensed', sans-serif;
font-weight: normal;
text-transform: uppercase;
}
.card_desc {
position: absolute;
opacity: 0;
max-width: 80%;
transition: opacity .3s ease-out;
inset: auto auto 80px 30px;
}
.card_desc {
inset: auto auto 80px 30px;
}
.card:hover .card_name {
inset: auto auto 220px 30px;
transition: inset .3s ease-out;
}
.card:hover .card_desc {
opacity: 1;
transition: opacity .5s .1s ease-in;
}
.card:hover .card_img {
transition: opacity .3s ease-in;
opacity: 1;
}
.material-symbols-outlined {
vertical-align: middle;
}
我已尝试删除 cookie 并重新加载网站，但仍然无法正常工作。