为什么 Chrome 无法读取我网站 CSS 的更改,即使 iOS Safari 和 Firefox 能够读取?
Why isn't Chrome reading changes to my website's CSS, even though iOS Safari and Firefox is able to?
当我处理我的代码并打开 Chrome 中的文件时,它们看起来是正确的。但是在我将它们上传到我的 Hostgator 服务器后,我添加的新更改并没有反映在浏览器中。 iPhone 6S 上的 Safari 和 Ubuntu 中的 Firefox 正在从服务器读取正确的 CSS,但是 Ubuntu 和 Windows 上的 Chrome 仍然是阅读旧代码。
我附上了一个 .gif link 这样你就可以看到我所看到的,加上我的 Github 回购 link 和一个 link 到实时站点。我还包括了我的 HTML 和一个 CodePen。请让我知道是否可以让我的问题更清楚,谢谢!
<!DOCTYPE HTML>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
<link rel="stylesheet" href="CSS/style.css">
<title>Rodolfo Eduardo, Writer and Entrepreneur</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="canonical" href="https://rodolfoeduardo.com/book">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="columnContainer">
<div class="outerColumn">
<div class="aboutlogocontainer">
<a class="mainLogoContainer" href="home">
<img class="mainlogo" alt="mainlogo" src="Images/favicon-194x194.png"/>
</a>
</div>
<div class="hamburgler-menu">
<ul class="hamburgler-menu-list">
<li><a class="navigationItem" href="about">About</a></li>
<li><a class="navigationItem" href="poems">Poems</a></li>
<li><a class="navigationItem" href="essays">Essays</a></li>
<li><a class="navigationItem" href="contact">Contact</a></li>
</ul>
</div>
<div id="hamburgler" class="hamburgler-icon-wrapper">
<span class="hamburgler-icon"></span>
</div>
</div>
<div class="innerColumn">
<h1 class="pageTitle">Books</h1>
<div class="igContainer1">
<div class="bookRow1">
<p class="bookCopyTitle2">I have two options for everyone:</p>
<p class="bookCopy">Amazon (paperback)</p>
<div class="bookImgContainer">
<a target="_blank" href="https://rads.whosebug.com/amzn/click/com/0999501305" rel="nofollow noreferrer"><img class="polaroid" src="Images/polaroid.jpg"/></a>
<p class="bookCopy">Etsy (ePub)</p>
<a target="_blank" href="https://www.etsy.com/"><img class="etsyphoto" src="Images/etsy.jpg"/></a>
</div>
</div>
</div>
<div class="iconAboutContainer">
<div class="iconAboutSubContainer">
<div class="vscoAboutContainer">
<div class="vscoicon">
<a href="https://vsco.co/rodolfohernandez"><img class="iconAboutImages" src="Images/vscologo.png" alt="VSCO Logo" /></a>
</div>
</div>
<div class="igAboutContainer">
<div class="instagramicon">
<a href="https://www.instagram.com/rodolfo.eduardo/?ref=badge"><img class= "iconAboutImages" src="Images/instagramlogo.png" alt="Instagram" /></a>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.getElementById('hamburgler').addEventListener('click', checkNav);
window.addEventListener("keyup", function(e) {
if (e.keyCode == 27) closeNav();
}, false);
function checkNav() {
if (document.body.classList.contains('hamburgler-active')) {
closeNav();
} else {
openNav();
}
}
function closeNav() {
document.body.classList.remove('hamburgler-active');
}
function openNav() {
document.body.classList.add('hamburgler-active');
}
</script>
</body>
</html>
您的 browser.try 清除缓存并打开您的网站时可能遇到缓存问题 again.In chrome 您可以使用 Ctrl+Shift+R 刷新并清除缓存同时在您的浏览器选项卡中
当我处理我的代码并打开 Chrome 中的文件时,它们看起来是正确的。但是在我将它们上传到我的 Hostgator 服务器后,我添加的新更改并没有反映在浏览器中。 iPhone 6S 上的 Safari 和 Ubuntu 中的 Firefox 正在从服务器读取正确的 CSS,但是 Ubuntu 和 Windows 上的 Chrome 仍然是阅读旧代码。
我附上了一个 .gif link 这样你就可以看到我所看到的,加上我的 Github 回购 link 和一个 link 到实时站点。我还包括了我的 HTML 和一个 CodePen。请让我知道是否可以让我的问题更清楚,谢谢!
<!DOCTYPE HTML>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
<link rel="stylesheet" href="CSS/style.css">
<title>Rodolfo Eduardo, Writer and Entrepreneur</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="canonical" href="https://rodolfoeduardo.com/book">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="columnContainer">
<div class="outerColumn">
<div class="aboutlogocontainer">
<a class="mainLogoContainer" href="home">
<img class="mainlogo" alt="mainlogo" src="Images/favicon-194x194.png"/>
</a>
</div>
<div class="hamburgler-menu">
<ul class="hamburgler-menu-list">
<li><a class="navigationItem" href="about">About</a></li>
<li><a class="navigationItem" href="poems">Poems</a></li>
<li><a class="navigationItem" href="essays">Essays</a></li>
<li><a class="navigationItem" href="contact">Contact</a></li>
</ul>
</div>
<div id="hamburgler" class="hamburgler-icon-wrapper">
<span class="hamburgler-icon"></span>
</div>
</div>
<div class="innerColumn">
<h1 class="pageTitle">Books</h1>
<div class="igContainer1">
<div class="bookRow1">
<p class="bookCopyTitle2">I have two options for everyone:</p>
<p class="bookCopy">Amazon (paperback)</p>
<div class="bookImgContainer">
<a target="_blank" href="https://rads.whosebug.com/amzn/click/com/0999501305" rel="nofollow noreferrer"><img class="polaroid" src="Images/polaroid.jpg"/></a>
<p class="bookCopy">Etsy (ePub)</p>
<a target="_blank" href="https://www.etsy.com/"><img class="etsyphoto" src="Images/etsy.jpg"/></a>
</div>
</div>
</div>
<div class="iconAboutContainer">
<div class="iconAboutSubContainer">
<div class="vscoAboutContainer">
<div class="vscoicon">
<a href="https://vsco.co/rodolfohernandez"><img class="iconAboutImages" src="Images/vscologo.png" alt="VSCO Logo" /></a>
</div>
</div>
<div class="igAboutContainer">
<div class="instagramicon">
<a href="https://www.instagram.com/rodolfo.eduardo/?ref=badge"><img class= "iconAboutImages" src="Images/instagramlogo.png" alt="Instagram" /></a>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.getElementById('hamburgler').addEventListener('click', checkNav);
window.addEventListener("keyup", function(e) {
if (e.keyCode == 27) closeNav();
}, false);
function checkNav() {
if (document.body.classList.contains('hamburgler-active')) {
closeNav();
} else {
openNav();
}
}
function closeNav() {
document.body.classList.remove('hamburgler-active');
}
function openNav() {
document.body.classList.add('hamburgler-active');
}
</script>
</body>
</html>
您的 browser.try 清除缓存并打开您的网站时可能遇到缓存问题 again.In chrome 您可以使用 Ctrl+Shift+R 刷新并清除缓存同时在您的浏览器选项卡中