如何解决 Chrome 浏览器中 CSS 样式不加载的问题

Chrome 因混合内容（HTTP 资源在 HTTPS 页面中加载）策略阻止非安全 CSS 加载，导致样式失效；只需将 CSS 链接的协议部分改为协议相对 URL（如 //example.com/style.css）或统一使用 HTTPS 即可修复。

Chrome 因混合内容（HTTP 资源在 HTTPS 页面中加载）策略阻止非安全 CSS 加载，导致样式失效；只需将 CSS 链接的协议部分改为协议相对 URL（如 `//example.com/style.css`）或统一使用 HTTPS 即可修复。

在现代浏览器（尤其是 Chrome）中，当 通过 HTTPS 协议访问时，所有外部资源（包括 CSS、JavaScript、图片等）也必须通过安全协议（HTTPS）加载，否则会被浏览器主动拦截并标记为“混合内容”（Mixed Content）。此时，即使 HTML 结构正常、CSS 文件真实存在且在其他浏览器（如 Firefox、Safari、IE）中能正确渲染，Chrome 仍会静默屏蔽这些不安全的样式表，造成页面无样式、布局错乱等现象。

以您提供的网址 https://volunteershub.co.uk/vmsmain 为例，当前 HTML 中的 CSS 引用为：

<link rel="stylesheet" type="text/css" href="http://www.volunteershub.co.uk/vmsmain/assets/main.css" />

该链接显式使用了 http:// 协议。当页面通过 https:// 加载时，Chrome 将拒绝加载此 HTTP 资源，并在开发者工具的 Console 或 Security 标签页中提示类似以下警告：

Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure stylesheet 'http://...'. This request has been blocked.

正确解决方案有以下两种（推荐后者）：

方案一：使用协议相对 URL（Protocol-relative URL）

移除 http: 或 https:，仅保留双斜杠开头，让浏览器自动继承当前页面协议：

<link rel="stylesheet" type="text/css" href="//www.volunteershub.co.uk/vmsmain/assets/main.css" />

注意：该写法在 HTTP/HTTPS 切换场景下有效，但已逐渐被现代最佳实践弃用（尤其在 HTTP/2 和 CDN 场景下可能带来不确定性）。

方案二（推荐）：显式使用 HTTPS

确保所有资源链接均采用 https://，与主站协议严格一致：

<link rel="stylesheet" type="text/css" href="https://www.volunteershub.co.uk/vmsmain/assets/main.css" />

? 额外检查建议：

1. 使用 Chrome DevTools（F12）→ Network 标签页，筛选 CSS 类型，查看 main.css 请求状态是否为 Blocked:mixed-content；
2. 检查服务器是否已正确配置 HTTPS 证书（可通过 SSL Labs Test 验证）；
3. 确保 <base> 标签未意外覆盖资源路径协议；
4. 若使用构建工具（如 Webpack、Vite），确认其 public asset 路径生成逻辑支持 HTTPS 上下文。

? 总结：Chrome 的混合内容策略是出于安全强制要求，而非兼容性缺陷。修复核心在于统一资源协议——只要页面走 HTTPS，所有外链资源（CSS、JS、字体、图片）都必须走 HTTPS。修改后无需清缓存即可立即生效（若仍有缓存问题，可强制刷新：Ctrl+Shift+R 或 Cmd+Shift+R），且该方案同时兼容 Firefox、Safari 及 Edge 等现代浏览器。