WordPress主题文件UTF-8 BOM带来的问题及解决方法

最新推荐文章于 2024-04-22 16:19:24 发布

weixin_33695082

最新推荐文章于 2024-04-22 16:19:24 发布

阅读量115

点赞数

文章标签： php xhtml

作者: 大圆那些事 | 文章可以转载，请以超链接形式标明文章原始出处和作者信息

最近在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字节。

关注