PHP 動態頁面在 IE 核心瀏覽器整體偏左解決方案：DOCTYPE 前註釋導致 Quirks Mode

開發時靜態 HTML 預覽正常，但改為 PHP 動態輸出後，在 IE 核心瀏覽器（IE6~11、舊版 Edge、國產雙核瀏覽器 IE 模式）中頁面整體向左偏移。經排查發現：註釋寫在 <!DOCTYPE 宣告之前，導致瀏覽器進入 Quirks Mode（相容模式），盒模型解析異常。

問題重現

<!-- 這行註釋在 DOCTYPE 之前 -->
<!DOCTYPE html>
<html>
<head><title>測試頁</title></head>
<body><div class="container">內容</div></body>
</html>

原因分析

• HTML 標準規定 <!DOCTYPE 必須位於文件**最前面**（前面只能有 BOM）。
• 任何字元（含空白、換行、註釋）出現在 DOCTYPE 之前，IE 會判定為無效 DOCTYPE，強制啟用 Quirks Mode。
• Quirks Mode 下：width 包含 padding/border、body 預設 margin 不同、置中方式 margin:0 auto 失效等，導致版面偏左。
• 靜態 HTML 可能被編輯器自動修正或瀏覽器容錯，但 PHP 輸出時若不小心 echo 或 include 產生輸出，就會觸發此問題。

解決方法

1. 移除或移動註釋：將註釋移至 <html> 內部或 <head> 區塊。
2. 確保 DOCTYPE 為第一行輸出：在 PHP 入口檔最開頭直接輸出，或使用輸出緩衝 ob_start() 統一控制。
3. 檢查 BOM：以 UTF-8 without BOM 儲存 PHP 檔案，避免隱形字元佔位。
4. 模板引擎檢查：Smarty、Blade、Twig 等模板若有 {* *}、{# #} 註釋，確認編譯後不會輸出到 DOCTYPE 前。

正確範本

<?php // 無任何輸出、空白、BOM ?>
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>頁面標題</title>
</head>
<body>
    <!-- 這裡可以放註釋 -->
    <div class="container">內容</div>
</body>
</html>

快速檢測技巧

• IE 開發者工具（F12）→ 模式頁籤：若顯示「Quirks Mode」或「IE5 模式」即為問題所在。
• 在 <body> 開頭加入 <!--[if IE]>IE 模式測試<![endif]--> 觀察版面變化。

補充：其他導致 Quirks Mode 的原因

• 使用舊版 DOCTYPE（如 HTML 4.01 Transitional 無系統識別碼）。
• <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> 強制降級。
• 伺服器回應標頭 X-UA-Compatible: IE=7。

現代專案建議統一使用 <!DOCTYPE html>（HTML5 簡短宣告），並確保無任何字元置於其前，即可避免此類版面異常。