Chrome 因安全策略禁止混合内容（HTTP 资源在 HTTPS 页面中加载），若网站通过 HTTPS 访问但 CSS 链接使用 http:// 协议，样式将被阻止加载——只需将 CSS 链接改为协议相对 URL（如 //example.com/style.css）或统一使用 https:// 即可修复。
chrome 因安全策略禁止混合内容（http 资源在 https 页面中加载），若网站通过 https 访问但 css 链接使用 `http://` 协议，样式将被阻止加载——只需将 css 链接改为协议相对 url（如 `//example.com/style.css`）或统一使用 `https://` 即可修复。
当你在 Chrome 中发现网页完全无样式（空白或纯 HTML 结构），而其他浏览器（如 Firefox、Safari、IE）显示正常，这极可能是 混合内容（Mixed Content） 问题导致的。Chrome 自版本 21 起默认阻止不安全的 HTTP 资源（如 CSS、JS、图片）在 HTTPS 页面中加载，且不会降级提示，而是静默屏蔽——这正是你访问 https://www.php.cn/link/089ca8cdbd14932172e61a7310ca9cc9 时 CSS 失效的根本原因。
查看你页面的原始 HTML 可发现类似如下代码：
<code class="html"><link rel="stylesheet" type="text/css" href="http://www.volunteershub.co.uk/vmsmain/assets/main.css"></code>
该链接以 http:// 明确指定协议。当用户通过 HTTPS 访问站点时，Chrome 将拒绝加载该 HTTP 资源，并在开发者工具的 Console 或 Security 标签页中显示警告（例如：Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure stylesheet 'http://...'）。
✅ 正确解决方案有两类（推荐前者）：
方案一：使用协议相对 URL（Protocol-relative URL）
将 http:// 或 https:// 替换为双斜杠 //，让浏览器自动继承当前页面协议：
<code class="html"><link rel="stylesheet" type="text/css" href="//www.volunteershub.co.uk/vmsmain/assets/main.css"></code>
✅ 优点：兼容 HTTP/HTTPS 环境，无需硬编码协议；
⚠️ 注意：仅适用于支持相同协议的资源服务器（即 //example.com 在 HTTPS 页面中会自动解析为 https://example.com）。
方案二：显式使用 https://
若资源服务器已配置有效 HTTPS（你的域名已支持 HTTPS），直接升级为安全协议：
<code class="html"><link rel="stylesheet" type="text/css" href="https://www.volunteershub.co.uk/vmsmain/assets/main.css"></code>
✅ 更现代、更明确，符合当前 Web 安全最佳实践。
? 调试建议：
- 按
F12打开 Chrome 开发者工具 → 切换到 Console 标签，查找Mixed Content相关报错； - 在 Network 标签中筛选
CSS，观察.css请求状态是否为blocked:mixed-content； - 确保所有外部资源（不仅是 CSS，还包括 JS、字体、图片）均采用 HTTPS 或协议相对路径。
? 补充提醒：
- 清除缓存、更换设备等操作无法绕过混合内容拦截，因其是运行时安全策略，非缓存问题；
- IE 和旧版 Safari 对混合内容限制较宽松，因此“其他浏览器正常”反而是该问题的典型特征；
- 若未来启用 HSTS（HTTP Strict Transport Security），则必须全面迁移到 HTTPS，协议相对 URL 将不再适用，应优先采用
https://。
修复后刷新页面，CSS 即可正常渲染——这是现代前端开发中必须重视的基础安全规范。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
