双击打开HTML文件样式丢失主因是file://协议限制：禁用跨源请求、不识别MIME类型、不支持服务端路径解析，导致CSS/JS/字体加载失败；应改用本地HTTP服务调试。
本地双击打开 HTML 文件为什么样式全没了
浏览器直接双击打开 file:// 协议的 HTML 文件，CSS 和 JS 很容易加载失败，尤其是用了相对路径、@import、字体文件或现代构建工具输出的资源。这不是代码写错了，是协议限制——file:// 下多数浏览器禁用跨源请求，且不支持服务端逻辑（如路径解析、MIME 类型自动识别）。
常见表现：net::ERR_FILE_NOT_FOUND 控制台报错、font-face 加载失败、background-image 不显示、fetch() 报错。
- 检查所有
link、script、img标签的href/src路径是否为相对路径（如./css/style.css），并确认文件实际位置与 HTML 文件层级一致 - 避免在 CSS 中用
url(../fonts/icon.woff2)这类向上跳级过深的路径，优先扁平化资源结构 - 字体文件（
.woff2、.ttf）在file://下常被拒绝加载，改用在线字体（如 Google Fonts）或转 Base64 内联可临时验证 - 如需本地调试，用轻量 HTTP 服务代替双击：命令行运行
npx http-server或python3 -m http.server 8000
CSS 文件 404 但路径看起来完全正确
发布后服务器返回 404 Not Found，往往不是路径写错，而是大小写、扩展名或服务器配置问题。Linux 服务器（绝大多数托管环境）路径严格区分大小写，而 Windows 开发环境不敏感，极易漏掉这个差异。
比如开发时写了 link href="CSS/style.css"，但实际文件夹名为 css/；又或者上传时 FTP 工具自动转小写，导致 Style.css 变成 style.css，而 HTML 里仍引用大写。
立即学习“前端免费学习笔记（深入）”；
- 统一使用小写字母命名所有文件和目录，HTML 中也全部小写引用：
css/style.css、images/logo.png - 检查服务器实际文件列表（如通过 FTP 客户端或主机控制面板），确认大小写、扩展名（
.CSS≠.css）、有无隐藏字符（如空格、中文顿号） - 部分共享主机默认不解析
.css文件 MIME 类型，需在根目录加.htaccess（Apache）：AddType text/css .css - 若用 Nginx，确认配置中有
include mime.types;且未覆盖 CSS 类型
发布后 Flex/Grid 布局错乱或回退成块级元素
不是所有旧版浏览器都支持现代 CSS 布局语法，尤其国内仍有大量用户使用 IE11 或老版本 UC、QQ 浏览器。即使你写了 display: flex，若没配 fallback 或前缀，上线后可能直接失效。
更隐蔽的问题是：构建工具（如 Vite、Webpack）默认只对 production 模式启用 Autoprefixer，而你在本地 dev 模式下看到正常，上线却出问题。
- 检查构建配置中 Autoprefixer 的
browserslist是否包含目标环境（如"defaults, not IE 11"或"> 1%, last 2 versions, not dead"） - 避免仅依赖单个声明，例如
display: grid应搭配display: -ms-grid（IE10–11）或降级为float/inline-block布局 - 不要用
gap替代margin做栅格间距，IE 和部分安卓 WebView 不支持；可用margin+:nth-child清除多余边距 - 用
caniuse.com查具体属性兼容性，输入flex-wrap、place-items等关键词验证
字体图标（IconFont）或自定义字体不显示
字体文件（.woff2、.eot、.ttf）上线后空白，90% 是 MIME 类型未正确设置或 CORS 策略拦截。服务器若未声明字体类型，浏览器会拒绝加载；跨域引入（如 CDN 字体）若没开 Access-Control-Allow-Origin，也会静默失败。
Chrome 控制台 Network 面板中字体请求状态码为 0 或 blocked，基本可锁定为 CORS 问题。
- 确保服务器配置了字体 MIME 类型：Apache 加
AddType application/font-woff2 .woff2；Nginx 加types { application/font-woff2 woff2; } - 若字体放在不同域名（如 CDN），服务端必须返回
Access-Control-Allow-Origin: *（或指定域名），CDN 后台通常有「跨域设置」开关 - 避免在 CSS 中混用协议相对 URL（
url(//cdn.example.com/icon.woff2)），HTTPS 页面下加载 HTTP 资源会被现代浏览器主动阻止 - 本地调试时，
file://协议下字体几乎必然失败，务必用本地 HTTP 服务验证
http-server）跑一遍完整流程，而不是依赖双击预览。 
