Как мне заставить мой CSS работать в Chrome?
Я новичок в Python и прохожу онлайн-курс Django у Дэйва Грея. В курсе мы создаем CSS для функции навигации.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: black;
color: whitesmoke;
font-size: 3rem;
display: flex;
flex-flow: column;
}
nav {
padding: 1rem;
background-color: #44B78B;
color: white;
font-size: 2.5rem;
}
main {
flex-grow: 1;
display: grid;
place-content: center;
}
h1,
p {
text-align: center;
}
a {
text-decoration: none;
color: #81dbb8;
}
a:hover {
opacity: .85;
}
Мой HTML-макет:
<!DOCTYPE html>
{% load static %}
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>
{% block title %}
Django App
{% endblock %}
</title>
<link rel = "stylesheet" href = "{% static 'css/style.css' %}">
<script src = "{% static 'js/main.js' %}" defer></script>
</head>
<body>
<nav>
<a href = "/">🏡</a> |
<a href = "/about">😊</a> |
<a href = "/posts">📰</a>
</nav>
<main>
{% block content %}
{% endblock %}
</main>
</body>
</html>
HTML моей домашней страницы:
{% extends 'layout.html' %}
{% block title %}
Home
{% endblock %}
{% block content %}
<h1>Home</h1>
<p>Check out my <a href = "/about">About</a> page.</p>
{% endblock %}
Обычно я использую Chrome, и это не похоже на его пример. После проверки CSS я открыл страницу в Edge, и страница выглядит идеально, как в его видео. В Chrome игнорируется часть CSS. Как сделать мои страницы удобными для Chrome?
Вот 2 скриншота: первый — как это должно выглядеть, второй — как это выглядит в Chrome.
Использовали ли вы инструменты разработчика Chrome, чтобы точно определить, что такое CSS, а что нет? Вы, например, берете старую версию?
Прикрепленные изображения (Edge Image и Chrome Image) показывают разницу во внешнем виде и то, что Chrome игнорировал. Другой комментатор помог решить проблему. Спасибо за попытку помочь!
Ответы 1
В хроме можно попробовать очистить кеш.
In the top right corner press the ellipses
-> Settings
-> Search for cache
-> clear browsing data now
-> change the filter to all time and clear
Как только вы очистите кеш, обновите страницу, и ваш CSS должен работать.
Большое спасибо! Это сработало. Я пытался проголосовать за ваш комментарий, но у меня нет такой репутации, чтобы сделать это. Как бы нелогично, что я не могу похвалить вас за репутацию человека, ответившего на мой вопрос действительным решением.
я проголосовал за ваш вопрос, возможно, вы сможете это сделать сейчас
так близко, спасибо. У меня 13 репутации из 15, необходимых для этого. Когда я нажму на него, я обязательно поддержу ваш ответ.
Какие части CSS игнорируются? Я имею в виду, это весь атрибут
navили только его части?