瀏覽 UTF-8 網頁出現空白頁的原因與解決方案

現象描述

許多開發者遇過：UTF-8 編碼的網頁在 IE 中顯示空白，而 Firefox、Safari 等現代瀏覽器正常。即使頁面已聲明 <meta charset="utf-8">，問題依舊。

根本原因：瀏覽器編碼判斷優先級差異

• IE：優先依據 HTML 內部 <meta> 標籤，其次才看 HTTP Header
• Firefox / Safari / Chrome：優先依據 HTTP Header Content-Type: text/html; charset=utf-8，其次才看 <meta>

若伺服器未發送正確的 HTTP Header，或 Header 與 Meta 不一致，IE 可能誤判編碼。

UTF-8 與雙字節編碼（GB2312/BIG5）的衝突

UTF-8 中文佔 3 字節，GB2312/BIG5 佔 2 字節。若 IE 錯誤以雙字節模式解析 UTF-8，當頁面前段出現奇數個全形字符時，會產生「半個漢字」殘留，導致後續標籤（如 <）被誤吞合為亂碼，進而使解析器提前終止，頁面呈現空白。

解決方案（按優先級排序）

1. 伺服器端發送正確 HTTP Header（最有效）

header("Content-Type: text/html; charset=utf-8");

PHP 中必須在任何輸出前調用。此 Header 優先級高於 Meta，所有瀏覽器均遵從。

2. Apache 全域預設編碼

編輯 httpd.conf，設定：

AddDefaultCharset UTF-8

等同於為所有響應自動添加上述 Header。若頁面已有 header()，以頁面為準。

3. 頁面內 Meta 標籤（最低優先級）

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

僅在無 HTTP Header 時生效，且 IE 優先級高於 Firefox，易產生不一致。

4. php.ini 設定 default_charset

default_charset = "utf-8"

PHP 會自動在 Header 中加入 charset。建議註釋掉，由應用層精確控制，避免多語言站點衝突。

優先級總結

1. header("Content-Type: ...")（PHP 應用層）
2. AddDefaultCharset（Apache 全域）
3. <meta http-equiv="Content-Type">（HTML 頁面）
4. default_charset（PHP 內建預設）

最佳實踐

在每個 PHP 入口文件最頂端（任何輸出前）加入：

<?php
header("Content-Type: text/html; charset=utf-8");
// 其餘業務邏輯
?>

如此可確保跨伺服器、跨瀏覽器的一致顯示，移植性最強。