起因

今天在美化网站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清除缓存

最后修改：2022 年 05 月 19 日
© 允许规范转载
要不？请我吃一下沙县连锁大酒店？