ASP.NET 2.0 CSS 失效完整排查指南：四大主因與對應解決方案

ASP.NET 2.0 專案中 CSS 樣式不生效是常見困擾，本文系統歸納四大核心成因與針對性解決方案，助您快速定位修復。

1. CSS 檔案路徑錯誤（最常見）

徵兆：樣式完全不套用、開發者工具顯示 404。
成因：相對路徑在 MasterPage/內容頁目錄層級不同時失效；樣式寫在母版頁但內容頁層級不同。
解決：

• 優先使用應用程式絕對路徑：<link href="~/Styles/main.css" runat="server" />（需加 runat="server"）
• 或在 MasterPage <head> 使用 ResolveUrl("~/Styles/main.css") 動態解析
• 開發者工具 Network 面板驗證實際請求 URL

2. CSS 規則寫法錯誤

徵兆：路徑正確但樣式不生效、被覆寫。
解決：

• 檢查選擇器拼寫、優先權、特殊性計算
• 使用瀏覽器開發者工具「Elements/Styles」面板查看實際套用/被覆寫規則
• 補充 CSS 專業知識（盒模型、BFC、Flex/Grid 佈局等）

3. 檔案編碼不一致

徵兆：內嵌在 .aspx 有效，獨立 .css 檔無效；中文類別名/內容亂碼。
成因：.aspx 預設 UTF-8，.css 檔儲存為 ANSI/Big5。
解決：

• 記事本/IDE 另存為 UTF-8 with BOM 或 UTF-8
• 或在 CSS 檔首行宣告 @charset "UTF-8";
• 專案統一編碼規範：全專案 UTF-8

4. 權限設定攔截靜態資源

徵兆：未登入時樣式失效（版面崩壞），登入後正常。
成因：web.config 設定 <deny users="?" /> 封鎖匿名存取，導致 CSS/JS/圖片被拒。
解決：在 web.config 中針對靜態資源目錄允許匿名：

<configuration>
  <location path="Styles">
    <system.web>
      <authorization>
        <allow users="?" />
      </authorization>
    </system.web>
  </location>
  <location path="Scripts">
    <system.web>
      <authorization>
        <allow users="?" />
      </authorization>
    </system.web>
  </location>
  <location path="Images">
    <system.web>
      <authorization>
        <allow users="?" />
      </authorization>
    </system.web>
  </location>
</configuration>

排查檢查清單

1. Network 面板確認 CSS 200 OK
2. Elements 面板確認規則被套用/覆寫
3. 檢查編碼一致性
4. 驗證匿名存取授權

依序排查通常能在 5 分鐘內定位根因。