WordPress主題文件UTF-8 BOM帶來的問題及解決方法
作者: 大圓那些事 | 文章可以轉載，請以超鏈接形式標明文章原始出處和作者信息
網址: http://www.rzrgm.cn/panfeng412/archive/2013/05/29/worpdress-theme-utf8-bom-issue-and-solution.html
最近在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字節。
浙公網安備 33010602011771號