網頁頂部莫名出現白條且圖片不顯示：BOM 頭與 JS 動態修改樣式雙重故障

現象

• 所有瀏覽器頁面頂部出現不明白條。
• 搜狗瀏覽器圖片不顯示 (寬高被設為 0)，其他瀏覽器正常。
• 開發者工具檢測到 <body> 前多出一個空文本節點。

根因一：UTF-8 BOM 導致白條

使用記事本儲存模版檔案時勾選「UTF-8」而非「UTF-8 無 BOM」，產生 EF BB BF 三字節 BOM。瀏覽器解析時將其視為文本節點插入 <body> 前，佔據版面產生白條。

根因二：JS 動態將圖片寬高設為 0 (搜狗特有)

頁面引用的某第三方統計/廣告 JS 在搜狗瀏覽器環境下誤判版面，執行 img.style.width = '0px'。其他瀏覽器該 JS 邏輯分支不執行。

修復步驟

1. 移除 BOM：用 Notepad++ / VS Code 以「UTF-8 無 BOM」編碼重新儲存所有模版檔 (PHP/HTML/JSP)。
2. 定位問題 JS：在搜狗開發者工具中斷點攔截 style.width 設值，反查呼叫堆疊，註釋或修正該段邏輯。
3. 防禦性 CSS：對關鍵圖片加 img { min-width: 1px !important; } 臨時阻斷。

工具推薦

• Notepad++：編碼 → 轉為 UTF-8 (無 BOM)。
• VS Code：右下角編碼選單選「UTF-8 without BOM」存檔。
• 批次處理：find . -name "*.php" -exec sed -i '1s/^\xEF\xBB\xBF//' {} \; (Linux/Mac)。

驗證

修復後重新整理，白條消失，搜狗瀏覽器圖片恢復正常顯示。