元数据
| id | css-load-failure | 收录 | 2026-08-29 |
|---|---|---|---|
| 问题域 | 构建与部署 | 主题分组 | 构建与部署 |
| 适用工具 | nginx · 外部工具vite-deploy | ||
症状
页面打开后布局错乱、文字堆叠、样式"消失"（像纯文本页）。特征：网络面板里 .css 状态码 200、Preview 内容完整，但页面依然无样式；控制台可能完全无报错（浏览器"静默丢弃"）；部分场景普通模式异常、无痕模式正常；字体图标显示为方框。
原因
浏览器按响应头 `Content-Type` 决定是否应用样式表，服务器端 MIME 配置错误是核心根因（状态码 200 不代表样式会被应用）：
1. **Content-Type 错误**：`text/plain`（当纯文本丢弃）、`application/octet-stream`（当二进制流）、`text/html`（拒绝应用）——常见于服务器未配置 MIME 类型表（如 nginx 缺 `include mime.types`，默认按 `default_type text/plain` 兜底）。
2. **Content-Type 非法格式**：如 `text/css,text/html` 逗号拼接。HTTP 标准只允许一个值；服务器不校验、原样发出，Edge 等严格浏览器静默丢弃（控制台无报错、状态码仍 200）。这是文章真实案例（common.css）。
3. **缓存陷阱**：修复服务器后普通模式仍无样式、无痕模式正常——浏览器缓存了旧 CSS 及其响应头，强刷/清缓存/加版本号解决。
4. 其他：404/403/500、CORS 跨域拦截、浏览器扩展拦截（`ERR_BLOCKED_BY_CLIENT`）、SSL 证书过期（`ERR_CERT_DATE_INVALID`）。
解法
1. **定位三步**：F12 控制台有无报错 → Network 面板筛选 `.css` 看状态码 → 看响应头 `Content-Type`（核心战场；200 + Preview 正常但页面无样式 = 100% 解读方式问题）。
2. **修复服务器 MIME**：
- nginx：`include mime.types;`（`.css` → `text/css`），兜底 `default_type application/octet-stream;`；或指定 `location ~ \.css$ { types { text/css css; } }`
- Apache：`AddType text/css .css`
- IIS：检查三处叠加配置——MIME 类型映射（.css 应为 text/css）、HTTP 响应标头自定义 Content-Type（有多余则删）、web.config `<customHeaders>` 节点
3. **字体图标方框**（CSS 正常但图标乱码）：字体 MIME 也要对——`.woff2` → `font/woff2`、`.woff` → `font/woff`、`.ttf` → `font/ttf`、`.otf` → `font/otf`、`.svg` → `image/svg+xml`、`.eot` → `application/vnd.ms-fontobject`。
4. **缓存陷阱**：用户侧清缓存（Ctrl+Shift+Delete → 缓存的图像和文件）/ 开发者 Ctrl+F5 强刷 / DevTools 禁用缓存；生产环境给 CSS 加版本号 `<link rel="stylesheet" href="common.css?v=20260806">`。
验证证据
- 本地实测（2026-08-29，nginx-light 1.28.3 + python3 http.server 3.14.4，纯本地零网络）：
1. **错误 MIME 复现**：python http.server 强制 `.css` → `Content-Type: text/plain`，curl -I 断言原样发出（浏览器将拒绝应用样式）。
2. **非法格式复现**：强制 `.css` → `Content-Type: text/css,text/html; charset=utf-8`，curl -I 断言服务器不校验、原样发出——复现文章真实案例（严格浏览器静默丢弃的服务器侧根因）。
3. **nginx 缺 mime.types**：`/style.css` → `Content-Type: text/plain`（默认 default_type 兜底）；加 `include mime.types` → `text/css`——文章 §5.2 修复命令成立。
4. **缓存机制**：`Last-Modified` + `If-Modified-Since` → `304 Not Modified`，证明浏览器会缓存 CSS 及其响应头；修复后需强刷或加版本号。
- 实测复现日志（2026-08-29）
来源与证据
素材来源：https://www.cnblogs.com/shenchuanchao/p/22547449/css-load-failure-troubleshooting-complete-guide
验证证据：Evidence details kept locally (2026-08-29)