网站开启HTTPS后CSS样式错乱、图片不显示？通用修复教程

不少站长在把网站从HTTP切换到HTTPS之后，会碰到一个比较头疼的情况：域名可以正常打开，但是页面排版乱了，样式失效，图片和图标加载不出来。

不管是普通虚拟主机，还是搭配CDN使用的站点，出现这类问题，大多是混合内容导致。简单说就是地址栏是HTTPS加密访问，页面里面的图片、样式表、脚本这些资源，链接写的还是HTTP，浏览器出于安全机制，会拦截这类资源加载，页面也就没法正常展示。

💡站长提醒：下面这套处理方式不挑建站程序，静态页面、ASP、PHP以及各类CMS都可以参考。动手修改之前，建议先备份网站文件和数据库，防止操作失误带来不必要的麻烦。

一、先确认问题：怎么判断是不是混合内容报错

这个检查方法在大部分浏览器里面都能用：

1. 打开出问题的网页

2. 按下键盘 F12，调出开发者工具

3. 切换到控制台Console选项卡

如果控制台出现红色提示，内容类似下面这行，就可以确定是混合内容引起的问题：
Mixed Content: The page at 'https://xxx' was loaded over HTTPS, but requested an insecure resource 'http://xxx'

二、临时处理方案，快速恢复页面显示

如果着急让网站先正常访问，暂时没时间批量修改链接，可以用这个办法。把下面规则加到网站根目录的 .htaccess 文件，Apache、LNMP以及多数虚拟主机环境都支持。

# 自动把页面内HTTP资源升级为HTTPS加载
Header always set Content-Security-Policy "upgrade-insecure-requests;"

# HTTP访问自动跳转到HTTPS
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}$1 [L,R=301]

加好之后，浏览器会自动把页面里面的HTTP资源换成HTTPS请求，图片和样式一般就能加载出来。

这里要说明一点，这个方式只是临时生效，不会改动源码和数据库里存的旧链接，想要长期稳定，还是要用后面的修复办法。

三、稳定修复一：模板和静态文件批量替换

适合静态网站、企业展示站、ASP自定义源码这类站点。

1. 通过FTP或者主机自带的文件管理器，进入网站根目录

2. 使用编辑器的查找替换功能

3. 查找：http://你的域名

4. 替换成：https://你的域名

需要覆盖的文件类型包含 .html、.htm、.css、.js、.php、.asp。

把写死在代码里的绝对HTTP地址全部更新，模板层面就不容易产出混合内容。

四、稳定修复二：数据库批量替换，适配动态CMS

动态程序的文章配图、内容链接大多保存在数据库里，只改模板文件，历史发布的内容里面的旧链接不会变化，需要在数据库里批量处理。

常规操作步骤：

1. 打开phpMyAdmin数据库管理面板

2. 执行替换语句，修改库里面存储的资源地址

UPDATE wp_posts SET post_content = REPLACE(post_content,'http://xxx.com','https://xxx.com');

执行完成后，历史文章里面的图片、内嵌资源链接都会同步更新，对收录也更友好。

五、使用CDN的站点单独排查

不少站长源站本身没有问题，接入CDN之后才出现样式错乱，大多是CDN的协议配置没有调好，EdgeOne、Cloudflare以及其他国内CDN都有可能碰到。

✅ 建议开启协议跟随，让CDN节点跟着访客访问协议处理，回源协议根据源站实际情况选择

❌ 尽量不要开启强制HTTP缓存、固定静态资源为HTTP协议这类规则

配置调整完毕，刷新CDN缓存，同时清空本地浏览器缓存再测试访问。

六、后续建站习惯，减少这类问题

之后做模板、新增页面的时候，尽量使用相对路径，不用带完整域名的绝对链接。不管是切换HTTP和HTTPS，还是后期迁移域名，都不容易出现资源加载异常。

不推荐的写法：

http://xxx.com/css/style.css
http://xxx.com/images/1.jpg

推荐写法：

/css/style.css
/images/1.jpg

七、排查顺序整理

碰到HTTPS样式错乱，可以按下面顺序一步步排查：

1. 打开F12控制台，确认是不是混合内容报错

2. 添加htaccess规则，先恢复网站访问

3. 批量替换模板文件内的旧HTTP地址

4. 在数据库里面替换历史内容里的资源链接

5. 核对CDN协议配置，刷新缓存测试

6. 后续制作页面优先使用相对路径

声明：本文仅为技术实操分享，修改网站文件、数据库前做好备份。不同主机、CDN服务商后台选项存在差别，设置以服务商官方文档为准。