IIS 7 靜態內容服務缺失導致 CSS 無法加載解決方案

故障現象

Windows 7 + IIS 7 環境下，網站結構混亂、樣式完全失效，但 HTML 內容正常顯示，無報錯信息。經排查非代碼問題，而是 IIS 核心功能組件缺失。

根因分析

IIS 7 採用模組化架構，靜態文件（CSS、JS、圖片等）處理由「靜態內容」模組負責。安裝 IIS 時若未勾選此功能，靜態資源將返回 404 或空響應，導致前端樣式失效。

解決步驟

1. 打開「控制面板」→「程序和功能」→「啟用或關閉 Windows 功能」
2. 展開：Internet 信息服務 → 萬維網服務 → 常見 HTTP 功能
3. 勾選 靜態內容
4. 點擊「確定」等待安裝完成
5. 重啟 IIS：iisreset /restart 或管理器中重啟站點

驗證方法

• 瀏覽器開發者工具 Network 面板：CSS/JS 狀態碼應為 200
• 直接訪問靜態文件 URL：https://localhost/style.css 應正常返回內容
• IIS 管理器 → 「模組」視圖：確認 StaticFileModule 已載入

相關知識擴展

IIS 7 vs IIS 6 MIME 類型差異

IIS 6 需手動添加 MIME 映射（如 .css → text/css），IIS 7 核心模組內建常見類型，但前提是「靜態內容」模組已安裝。

常見缺失模組對照表

最佳實踐建議

• 最小化安裝原則：僅勾選業務必需模組，減少攻擊面與資源佔用
• 自動化部署：使用 PowerShell Install-WindowsFeature Web-Static-Content 腳本化安裝
• 環境一致性：開發、測試、生產環境保持相同 IIS 功能集合

總結

IIS 7 模組化設計雖靈活，但易導致核心功能缺裝。「靜態內容」模組缺失是新手部署最常見坑點，記住「CSS 不生效先查模組」可快速定位解決。