SSL证书部署后网站样式错乱怎么修复：混合内容问题排查

证书装好了，HTTPS也生效了，结果打开网站一看——样式全崩了，图片也裂了。这大概是SSL证书部署后最常见的问题，原因几乎都指向一个东西：混合内容。

什么是混合内容

你的页面通过HTTPS加载，但页面里的CSS、JS、图片等资源还在用HTTP链接引用。浏览器出于安全策略，会拦截这些不安全的资源请求，导致样式和功能加载不出来。打开浏览器的开发者工具（F12），切到Console标签，你会看到一堆红色警告，类似“Mixed Content: The page was loaded over HTTPS, but requested an insecure stylesheet“。

方案一：手动改链接

如果站点页面不多，直接在代码里把所有的http://替换成https://。重点检查几个地方：HTML模板里的link和script标签、CSS文件里的background-image路径、JavaScript里的Ajax请求地址、数据库里存储的图片URL。

有个容易遗漏的点：有些CMS系统（比如WordPress）会把站点地址硬编码在数据库里。光改代码没用，还得进数据库改wp_options表的siteurl和home字段。DedeCMS也有类似情况，检查系统设置里的站点根网址配置。

方案二：用相对协议

改代码的时候，与其写死https://，不如用协议相对URL，也就是把http://cdn.example.com/style.css写成//cdn.example.com/style.css。浏览器会自动根据当前页面的协议来请求资源，HTTPS页面就走HTTPS，HTTP页面就走HTTP。这样即使以后回退到HTTP也不会出问题。

方案三：服务器层自动升级

如果站点历史悠久，代码里散落着大量http://链接，一个个改不现实。可以在Nginx配置里加一段响应头替换：

sub_filter 'http://' 'https://';    sub_filter_once off;

这样Nginx会在输出HTML时自动把所有http://替换成https://。注意这个方法只对HTML有效，JS和CSS文件里的链接不会被替换。如果问题出在这些静态文件里，还是得回到方案一或方案二。

Apache也有类似的替代方案，启用mod_substitute模块后配置Substitute 's|http://|https://|i'，效果一样。

最后补一个判断标准：修复完成后，用浏览器访问页面，地址栏的锁图标是闭合的、没有三角感叹号，就说明混合内容问题已经彻底解决了。如果还有感叹号，继续看F12控制台，按提示逐个处理剩余的不安全资源。