HTTPS页面中HTTP CSS资源被浏览器直接丢弃而非加载失败，因其属主动型混合内容，会篡改DOM、注入伪元素等高危行为，Chrome/Firefox/Edge强制拦截且不发请求，状态显示blocked:mixed-content；需通过DevTools Network面板筛选http://并检查Initiator定位CSS中@import、url()等隐蔽HTTP引用，唯一可靠修复是显式替换为https://。
HTTPS 页面根本不会向 HTTP CSS 发起请求，不是加载失败，是直接丢弃——浏览器把 @import、background: url(http://)、<link href="http://"> 全部当主动型混合内容（active mixed content）拦截，状态栏显示 blocked:mixed-content。
为什么浏览器连请求都不发？
CSS 属于“主动型混合内容”，能篡改 DOM 渲染、注入伪元素、劫持 getComputedStyle()，甚至触发 FOUC 或布局错乱。这不是兼容性问题，而是现代浏览器（Chrome/Firefox/Edge）的强制安全策略：不警告、不降级、不回退，直接丢弃整个请求。
常见被拦位置包括：
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">- CSS 文件内部的
@import url("http://cdn.example.com/base.css") - 后端模板动态拼接：
echo '<link href="http://' . $host . '/css/app.css>'
怎么快速定位所有被拦的 HTTP CSS？
别靠肉眼扫 HTML。打开 Chrome DevTools → Network 标签页 → 勾选 Preserve log → 刷新页面 → 在 Filter 输入框输入 http://（不是 mixed，后者漏掉大量隐蔽请求）→ 查看 Status 列为 blocked:mixed-content 的项 → 点开看 Initiator 列，反查是哪行 HTML、哪个 JS 动态插入、或哪条 CSS 的 @import 或 url() 引起的。
立即学习“前端免费学习笔记（深入）”；
特别注意：
- 富文本字段存的
<style>body{background:url(http://...)</style>也会被拦 - JS 运行时设置：
el.style.backgroundImage = 'url(http://xxx.jpg)'同样触发拦截 - 老版百度统计等第三方 SDK 用
document.write('<script src="http://..."></script>')，你改不了源码，只能换 SDK
替换方案里哪些真正可靠？
显式写死 https:// 是唯一落地可行的做法。协议相对 URL（//cdn.example.com/style.css）在 2026 年已基本失效：
- 主流 CDN（如 jsDelivr、unpkg、Cloudflare）早已关闭 HTTP 端口，
//会直接返回net::ERR_CONNECTION_REFUSED - 本地开发用
file://打开 HTML 时，//被解析成file://cdn.example.com/，必然失败 - OSS 类资源带 query 参数（如
https://oss.example.com/a.jpg?x-oss-process=...），部分 CDN 回源规则不匹配 HTTPS，导致 404
操作建议：
- 先确认目标域名是否真不支持 HTTPS：把
http://fonts.googleapis.com改成https://fonts.googleapis.com直接访问试试，99% 都通 - CDN 如
https://cdn.jsdelivr.net、https://unpkg.com全部支持 HTTPS，旧文档写的“仅 HTTP”大多是过时信息 - 如果真遇到不支持 HTTPS 的老旧内网服务，必须走代理或镜像迁移，不能妥协用
//或降级到 HTTP
CSS 内部的 @import 和 url() 最容易被忽略
它们不会出现在 HTML 源码里，却一样触发 blocked:mixed-content，且 Network 面板中显示为子请求（Initiator 指向父 CSS 文件）。修复时必须进每个 CSS 文件逐行检查：
- 搜索
@import、@font-face { src: url(、background:、border-image:、list-style:等含url(的声明 - 注意转义：
url('http:\/\/example.com\/a.png')也算 HTTP 请求 - PostCSS、Sass 编译后生成的 CSS 也要检查输出产物，不是只看源文件
真正麻烦的从来不是 HTML 里的 <link>，而是散落在几十个 CSS 文件里、嵌套在 @media 或 @supports 里的 url(http://) —— 它们不报错、不显红，只默默让样式失效。
