我为学校课程制作了网站。它由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>
答案 0 :(得分：1)
可能没有导致问题的头部标签。
我知道在HTML5中可以将其省略，但是您可以尝试。
答案 1 :(得分：-2)
我修复了。
我刚刚制作了一个全新的文件，并将所有内容从首页复制到了该文件。 现在它可以正常工作了，我不知道问题出在哪里。我最好的猜测是它正在使用该文件的某些旧版本。