HTTPS页面引入HTTP CSS会被浏览器直接拦截，不发起请求，显示blocked:mixed-content；因CSS属主动型混合内容，可篡改渲染逻辑和JS行为，现代浏览器强制阻断，须将所有href及@import/url()中的http://显式改为https://。
HTTPS 页面里引入 HTTP 的 CSS，浏览器根本不会发请求——不是加载失败，是直接丢弃。你看到的 blocked:mixed-content 状态，是在 Network 面板里那条 <link href="http://..."> 请求的 Status 列里明明白白写着的。
为什么 Chrome/Firefox/Edge 会直接拦掉 HTTP CSS
CSS 属于“主动型混合内容”（active mixed content），它能改变 DOM 渲染、影响伪元素、干扰 getComputedStyle()，甚至触发 FOUC 或布局错乱。浏览器不警告，直接阻断，这不是兼容性问题，是强制安全策略。
-
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">—— 典型被拦位置 - CSS 文件内部的
@import url("http://...")—— Network 面板里会显示为子请求，同样被拦 - 后端模板拼接的：
echo '<link href="http://' . $host . '/css/app.css>'—— 动态生成也逃不过
怎么快速定位所有被拦的 HTTP CSS
别靠肉眼扫 HTML。打开 Chrome DevTools → Network 标签页 → 刷新页面 → 在 Filter 输入框里输入 mixed，立刻高亮所有被拦请求。点击任一被拦项，看 Initiator 列，就能反查到是哪行 <link> 或 JS 动态插入导致的。
- 注意：协议相对 URL（
href="//cdn.example.com/style.css"）看似省事，但若 CDN 不支持 HTTPS（比如某些老旧内网静态服务），会直接 404 - 本地开发时用
http://localhost:3000加载页面却引用线上http://xxx.com/style.css，同样触发拦截——协议不一致即风险
替换 HTTP CSS 的唯一可靠做法
显式写死 https://。不要依赖协议相对写法，尤其当目标域名存在证书异常、HTTP 回退或 CDN query 参数（如 ?v=1.2.3）时，// 会失效或出错。
立即学习“前端免费学习笔记（深入）”；
- 先确认第三方是否真不支持 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，得进 CSS 文件逐行检查。
