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號