WordPress主题文件UTF-8 BOM带来的问题及解决方法
作者: 大圆那些事 | 文章可以转载，请以超链接形式标明文章原始出处和作者信息
最近在Windows下修改一个WordPress主题时，以UTF-8 BOM格式保存文件，后来导致网站页面在IE下出现无法居中显示等问题。下面是具体的排查和解决过程，留作日后参考。
问题现象
网站页面在各版本的IE下都不能正常显示：页面主题内容不能居中，紧靠左侧，同时左右侧栏也显示不正常，总之就是主题的css并没有生效。
而另一方面，网站页面在Firefox和Chrome浏览器下均显示十分正常。
问题排查
1. 经排查发现，无论IE、Firefox还是Chrome下，浏览器下看到生成的html中都已经加了DOCTYPE标识，但是很奇怪，前面多了一行空行，即看到的html源代码的前两行是：
1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. 经过查相关资料，确定可能是IE下对DOCTYPE的识别要求很严格，而Firefox和Chrome却可以正常识别。问题在于为什么会多出这么一行空行？
3. 在Linux服务器端查看主题相关文件，发现有些文件的开头存在特殊字节（后来查相关资料确定是UTF-8的BOM标记）：
1 <feff><div class="header">
4. 原因分析：对于UTF-8中的BOM字节，PHP不会忽略，而是在读取、包含或者引用这些文件时，将BOM作为该文件开头正文的一部分，于是就有了<feff>这样的特殊字符。进一步，在windows下，遇到不识别的字符又按照换行处理，所以就多出了一行空行。
问题解决
排查定位到这个原因真不容易，解决方法却很简单，以下两种任意一种即可：
1. windows环境下使用UltraEdit或Notepad++编辑器，按照UTF-8 without BOM格式重新保存文件，注意主题下的所有文件均修改。
2. linux环境下编写php脚本遍历指定目录，删除该目录下所有文件的BOM字节。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架