起因

今天在美化网站css的时候,发现后端的控制面板中的框架与文本出现偏差

错位界面

随即打开浏览器的调试模式进行查看

Chrome调试模式

发现问题

原来是此界面的height属性偏低

且这个属性所在的位置为as-style.css的第62

随机打开Vscode进行代码修改

原代码

.typecho-option {
    width: 40%;
    height: 25vh;
    padding: 20px;
    float: left;
    margin: 3%;
    border-radius: 4px;
    box-shadow: inset rgb(209, 217, 230) 10px 10px 10px, inset rgb(249, 249, 249) -10px -10px 10px;
}

修改后的代码

.typecho-option {
    width: 40%;
    height: 15vh;
    padding: 20px;
    float: left;
    margin: 2%;
    border-radius: 4px;
    box-shadow: inset rgb(209, 217, 230) 10px 10px 10px, inset rgb(249, 249, 249) -10px -10px 10px;
}

然后就将修改后的代码覆盖上传

上传代码至服务器

本以为就这样轻轻松松就可以解决问题了

但是!

恐怖来临

当我刷新网页 他居然没有变!!!

依旧错位的页面

然后打开调试模式

发现属性也没变

框架CSS属性

于是我便直接复制该css的链接 进行下载查看

复制图片链接

IDM YYDS!

咦 没问题啊 是刚上传的版本啊

VScode

不过咋不生效的呢?

傻瓜行为出现

于是乎我便又重新上传了几次

以及把这个功能删除

然后重新上传添加

甚至直接重启服务器

前前后后花了大概一个多小时

但依旧无果

奇迹出现

不知道怎么的

突然想起来要不要换个浏览器试一下

然后

双击打开Edge

粘贴并访问

Unbelievable!!!

不再错位的界面

框架属性已变更

居然成了!

感悟

真相原来是我把代码上传到服务器,服务器已经接收到了

但是忽略了浏览器的缓存机制

所以各位在搭建网站的时候

如果发现实际效果与预想中的不符

记得清除浏览器的缓存!

Chrome清除缓存

END
本文作者:
文章标题:浏览器缓存对修改网站样式的重要性
本文地址:https://kk.hackerjk.top/win/21.html
版权说明:若无注明,本文皆由小陈的小角落原创,转载请保留文章出处。
最后修改:2021 年 09 月 04 日 09 : 30 PM
要不?请我吃一下沙县连锁大酒店?