代码块尾部多出空白行的解决过程

如上图所示,代码块的尾部莫名多出一行空白行。其实这个问题已经有好几个月了,此前偶然用IE打开网站,发现了这个问题。由于在 Chrome 中并没有此问题,一直也就没有深究。

昨天下午突然收到 Email,被告知 WordPress 程序已自动升级,What?! WordPress 居然还会自动升级!用 Chrome 打开网站检查页面,发现 Chrome 中也出现了空白行问题。也不知道是 WordPress 版本升级的问题,还是新版本 Chrome 的问题,反正这个问题是必须解决了。

先把当前站点状态做了备份。为了尽快解决问题,尝试还原到上一次备份,发现使用 Chrome 打开还是有空白行,说明和 WordPress 版本升级可能没有关系。回滚到最新一次备份。
 

Chrome 中按 F12,对照页面,并没有发现空白行对应 HTML 代码,这就奇怪了。
 
考虑到此前对 WordPress 主题做过一些修改,有可能是主题的原因,因此切换到“二〇一九”主题。

刷新页面,发现确实没有空白行的问题。切换回有问题的 Twenty Seventeen 主题。
 

主题目录位于 \wp-content\themes\twentyseventeen,由于上次修改主题已经是好几个月前的事情,实在记不清修改了哪些文件。

将整个 “twentyseventeen” 目录 download 下来,可以看到 header.php 和 style.css 两个文件的修改日期较新。

直接从 WordPress 程序包中提取 header.php 和 style.css,分别尝试使用这两个文件替换线上版本的对应文件。进一步将问题定位到了 style.css,style.css 中此前也做过许多修改。那究竟是哪一部分代码出现问题呢?

通过使用 Notepad++ 的 compare 插件对原 style.css 和线上版本的 style.css 作对比,将文件中的差异代码与线上版本替换测试,最终将问题锁定到这一行 padding,删除,问题解决!

排障过程中还要注意,有使用 Cache 插件的最好先停用,并清除缓存,有用 CDN 的也要清。否则由于缓存,问题到底解决了没有,自己有可能被搞懵圈。例如,Cloudflare CDN 清理缓存的设置位于 Overview → Purge Cache 。

后续再将相应的 css 分离,把问题彻底解决。
 

最后,感谢 WP Editor.md 的开发者 @淮城一只猫 的协助!
 

发表评论

邮箱地址不会被公开。