html - 一个 HTML 页面没有看到 CSS（Chrome 除外），但在不同的页面上却看到了
问题描述
我为学校课程制作了我的网站。它由 4 个页面组成，它们都可以在 Google Chrome 上运行。
一旦我尝试在 Microsoft Edge 上打开它们，除了主页之外的所有页面都可以正常工作。
当我在 Microsoft Edge 上检查控制台时，它在主页上找不到包含所有 4 个 CSS 页面的地图。但在其他页面上，我看不出代码有任何差异。
第一页（不适用于 Microsoft Edge）：
<!DOCTYPE html>
<html lang="nl">
<title>Appels</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/CSS1.css">
<link rel="stylesheet" href="CSS/CSS2.css">
<link rel="stylesheet" href="CSS/CSS3.css">
<link rel="stylesheet" href="CSS/CSS4.css">
<link rel="icon" href="Fotos/Appel-jg.png" sizes="16x16" type="image/png">
<style>
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Lato", sans-serif
}
.bar,
h1,
button {
font-family: "Montserrat", sans-serif
}
.fa-anchor,
.fa-coffee {
font-size: 200px
}
</style>
<body>
<!-- Navbar -->
<div class="top">
<div class="bar red card left-align large">
<a class="bar-item button hide-medium hide-large right padding-large hover-white large red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
<a href="AppelSite.html" class="bar-item button padding-large white">Home</a>
<a href="PopulaireAppels.html" class="bar-item button hide-small padding-large hover-white">Populaire Appels</a>
<a href="Recepten.html" class="bar-item button hide-small padding-large hover-white">Recepten</a>
<a href="Contact.html" class="bar-item button hide-small padding-large hover-white">Contact</a>
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="bar-block white hide hide-large hide-medium large">
<a href="#" class="bar-item button padding-large">Link 1</a>
<a href="#" class="bar-item button padding-large">Link 2</a>
<a href="#" class="bar-item button padding-large">Link 3</a>
<a href="#" class="bar-item button padding-large">Link 4</a>
</div>
</div>
<!-- Header -->
<header class="container red center" style="padding:128px 16px">
<h1 class="margin jumbo">APPELS</h1>
<p class="xlarge">Wouter Schuur</p>
<p class="xlarge">18AO-A</p>
</header>
<!-- First Grid -->
<div class="row-padding padding-64 container">
<div class="content">
<div class="twothird">
<h1>Appels</h1>
<h5 class="padding-32">De appel is de vrucht van de plant Malus domestica. De vlezige vrucht bestaat uit drie lagen, maar soms vormen twee of drie lagen een geheel en zijn ze afzonderlijk niet meer te herkennen. Zo zijn bij de appel het exocarp en mesocarp niet meer
van elkaar te onderscheiden en vormen gezamenlijk met de opgezwollen bloembodem het vruchtvlees. Het klokhuis is het endocarp met daarin de zaadjes (pitjes) en in het midden de vaatbundel naar het steeltje.</h5>
<p class="text-grey">De appel (Malus domestica) is er in veel smaken, van friszuur tot zoet. Hij wordt vaak rauw genuttigd, maar hij wordt ook veel toegepast in de keuken in bijvoorbeeld appeltaart of als garnering op pannenkoeken. En hij wordt vaak verwerkt tot appelsap,
appelcider, appelmoes en appelstroop.</p>
</div>
<div class="third center">
<i class=""><img src="Fotos/Appels.png" alt="Rode appel" style="width:500px;height:400px;"></i>
</div>
</div>
</div>
<!-- Second Grid -->
<div class="row-padding light-grey padding-64 container">
<div class="content">
<div class="twothird">
<h1>Over deze site</h1>
<h5 class="padding-32">Ik, Wouter Schuur, heb deze site voor school gemaakt. Ik zit op het Horizon College in Alkmaar, en dit was een opdracht tijdens de tweede periode in het eerste jaar voor het vak Frontend. Ik heb het onderwerp "Appels" gekozen omdat dat een van
de eerste dingen was die in mij op kwam. Daarnaast is het onderwerp ook niet heel erg belangrijk, het gaat meer over hoe de site er uit ziet.
</h5>
<p class="text-grey">Voor deze Site heb ik een template van W3 schools gebruikt. De reden daarvoor is dat ik het zonde van de tijd die ik had vond om de hele layout van de site zelf te maken. Terwijl er hele mooie templates op het internet staan, daarnaast heb ik
grotendeels wat er op de site te zien is zelf gemaakt. Het enige van W3 School is de template.
</p>
</div>
<div class="third center">
<i class=""><img src="Fotos/Horizon.png" alt="Rode appel" style="width:500px;height:400px;"></i>
</div>
</div>
</div>
<div class="container black center opacity padding-64">
<h1 class="margin xlarge">""</h1>
</div>
<!-- Footer -->
<footer class="container padding-64 center opacity">
<div class="xlarge padding-32">
</div>
</footer>
<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("show") == -1) {
x.className += " show";
} else {
x.className = x.className.replace(" show", "");
}
}
</script>
</body>
</html>另一个页面，它适用于每个浏览器：
<!DOCTYPE html>
<html lang="nl">
<title>Appels</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/CSS1.css">
<link rel="stylesheet" href="CSS/CSS2.css">
<link rel="stylesheet" href="CSS/CSS3.css">
<link rel="stylesheet" href="CSS/CSS4.css">
<link rel="icon" href="Fotos/Appel-jg.png" sizes="16x16" type="image/png">
<style>
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Lato", sans-serif
}
.bar,
h1,
button {
font-family: "Montserrat", sans-serif
}
.fa-anchor,
.fa-coffee {
font-size: 200px
}
</style>
<body>
<!-- Navbar -->
<div class="top">
<div class="bar red card left-align large">
<a class="bar-item button hide-medium hide-large right padding-large hover-white large red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
<a href="AppelSite.html" class="bar-item button padding-large white">Home</a>
<a href="PopulaireAppels.html" class="bar-item button hide-small padding-large hover-white">Populaire Appels</a>
<a href="Recepten.html" class="bar-item button hide-small padding-large hover-white">Recepten</a>
<a href="Contact.html" class="bar-item button hide-small padding-large hover-white">Contact</a>
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="bar-block white hide hide-large hide-medium large">
<a href="#" class="bar-item button padding-large">Link 1</a>
<a href="#" class="bar-item button padding-large">Link 2</a>
<a href="#" class="bar-item button padding-large">Link 3</a>
<a href="#" class="bar-item button padding-large">Link 4</a>
</div>
</div>
<!-- Header -->
<header class="container red center" style="padding:128px 16px">
<h1 class="margin jumbo">POPULAIRE APPELS</h1>
<p class="xlarge">Wouter Schuur</p>
<p class="xlarge">18AO-A</p>
</header>
<!-- First Grid -->
<div class="row-padding padding-64 container">
<div class="content">
<div class="twothird">
<h1>Elstar</h1>
<h5 class="padding-32">De Elstar is een appel met een rode blos op een geelgroene ondergrond. Er zijn echter zeer veel kleurmutanten van helderrood tot donkerrood. In tegenstelling tot Jonagold smaken appels zonder blos ook goed. De smaak heeft een karakteristiek aroma.
Het vruchtvlees is roomwit en sappig. Elstar kan wel in het appelgebak, maar houdt veel vocht vast. Dit kan gecompenseerd worden door middel van gedroogde vruchten. Ook is deze appel geschikt voor appelmoes of -sap.</h5>
<p class="text-grey">In 2006 bestond 45 procent van het in Nederland aanwezige appelareaal uit Elstar. In Nederland behoort Elstar tot de door de consument hoogst gewaardeerde appelsoorten. Ook het vruchtsap en de moes worden veel verkocht.</p>
</div>
<div class="third center">
<i class=""><img src="Fotos/Rode-Appel.png" alt="Rode appel" style="width:500px;height:400px;"></i>
</div>
</div>
</div>
<!-- Second Grid -->
<div class="row-padding light-grey padding-64 container">
<div class="content">
<div class="twothird">
<h1>Granny Smith</h1>
<h5 class="padding-32">De granny smith is een populair appelras, afkomstig uit Australie. Dit ras werd rond 1865 door Marie Ana (Granny) Smith gekweekt. Er wordt verondersteld dat het een kruising is van de Malus sylvestris, de wilde appel, met een inheemse appelsoort.
Spoedig werd de granny smith populair in Nieuw-Zeeland. Rond 1935 werd de soort in Engeland geintroduceerd en in de jaren 70 in de Verenigde Staten.</h5>
<p class="text-grey">Granny smith is een groene appel. Soms hebben ze een gele of rozeachtige blos. De appel is zuur en kan worden gekookt of uit de hand worden gegeten. Ook wordt het ras voor salades gebruikt, omdat de plakjes niet zo snel bruin worden als andere
appelrassen.</p>
</div>
<div class="third center">
<i class=""><img src="Fotos/Granny-Smith.png" alt="Rode appel" style="width:400px;height:400px;"></i>
</div>
</div>
</div>
<div class="container black center opacity padding-64">
</div>
<!-- Footer -->
<footer class="container padding-64 center opacity">
<div class="xlarge padding-32">
</div>
</footer>
<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("show") == -1) {
x.className += " show";
} else {
x.className = x.className.replace(" show", "");
}
}
</script>
</body>
</html>解决方案
没有头标签可能会导致问题。
我知道在 HTML5 中它可以省略，但你可以试试。
推荐阅读
- bash - 带有 ls -ls 和 OR 模式通配符的 Shell 脚本
- java - 在 k8 pod 中运行 jcmd，权限被拒绝或无法打开套接字文件
- azure - 如何在第一个管道上的阶段完成时运行第二个 Azure 管道
- unix - 从终端的父文件夹运行程序
- async-await - 来自 S3 FastAPI 的响应文件流
- javascript - 将 Summernote 与 Webpack 一起使用
- amazon-web-services - 使用 NLB 和 IAM 身份验证公开 AWS MSK - 主机名验证失败
- json - 如何从 Json 文件创建对象列表
- javascript - 测试什么：JavaScript 或 TypeScript？
- django - 在 django 中订购 pip 包版本