Chrome 因安全策略禁止混合内容（HTTP 资源在 HTTPS 页面中加载），若网站通过 HTTPS 访问但 CSS 链接使用 http:// 协议，样式将被阻止加载，导致页面无样式显示。
chrome 因安全策略禁止混合内容（http 资源在 https 页面中加载），若网站通过 https 访问但 css 链接使用 `http://` 协议，样式将被阻止加载，导致页面无样式显示。
当你在 Chrome 中打开网站（如 https://www.php.cn/link/089ca8cdbd14932172e61a7310ca9cc9）时，浏览器会以 HTTPS 协议加载页面。此时，若 HTML 中引用的 CSS 文件仍使用绝对 HTTP 协议（例如 <link rel="stylesheet" href="http://www.volunteershub.co.uk/.../main.css">），Chrome 会将其识别为不安全的混合内容（Mixed Content），并默认静默阻止加载——既不渲染样式，也不在开发者工具中明显报错（早期版本可能仅在 Console 显示 Blocked loading mixed active content 类似警告）。
✅ 正确做法是：将 CSS 链接中的协议部分替换为协议相对 URL（Protocol-relative URL），即用 // 开头：
<!-- ❌ 错误：强制使用 HTTP，HTTPS 页面下被阻止 --> <link rel="stylesheet" type="text/css" href="http://www.volunteershub.co.uk/vmsmain/assets/main.css"><!-- ✅ 正确：自动继承当前页面协议（HTTPS → 加载 HTTPS 资源） --><link rel="stylesheet" type="text/css" href="//www.volunteershub.co.uk/vmsmain/assets/main.css">
⚠️ 注意事项：
- 协议相对 URL（
//domain.com/path）在现代开发中已逐渐被更推荐的 相对路径 或 根相对路径 替代（如/vmsmain/assets/main.css），因其更明确、兼容性更好，且避免在本地file://协议下失效； - 若站点已全面启用 HTTPS，最佳实践是直接使用
https://，确保资源协议明确、可预测； - 检查方式：按
F12打开 Chrome DevTools → 切换到 Network 标签 → 刷新页面 → 查看.css请求状态：若显示Blocked或状态码为(blocked:mixed-content)，即确认为此问题； - 同样逻辑适用于 JS、图片、字体等所有外部资源——任何
http://链接在 HTTPS 页面中均可能被拦截。
? 总结：Chrome 的混合内容策略是出于安全考虑的主动防护。解决 CSS 不显示问题，关键在于确保所有外部资源协议与页面协议一致。优先采用根相对路径或显式 HTTPS，并配合 DevTools 快速验证资源加载状态，可高效定位并修复此类“样式消失”问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
