这种跨浏览器CSS加载异常的情况我之前也碰到过几次，结合你的描述（本地多浏览器测试正常、上线后仅Chrome生效），大概率是线上环境的资源请求/服务配置出了问题，而非代码本身。下面是按优先级排序的排查和解决步骤：

1. 确认CSS文件的MIME类型是否正确 #

浏览器对资源的MIME类型校验严格程度不同，Chrome容错性较高，但Firefox和IE会拒绝加载MIME类型不正确的样式表。

• 排查方法：打开浏览器开发者工具（F12）→切换到「网络」面板，刷新页面后找到CSS文件的请求，查看响应头中的Content-Type字段。正常情况下应该是text/css。
• 修复方案：
  • 如果你用Nginx：在server或对应location块中添加配置：types { text/css css; }
  • 如果你用Apache：确保mod_mime模块已启用，且mime.types文件中存在text/css css的映射
  • 静态托管平台（如Netlify/Vercel）：检查是否自定义了MIME规则，若有则修正为默认配置

2. 核对CSS文件路径与大小写 #

本地系统（如Windows）是大小写不敏感的，但线上服务器几乎都是Linux系统，对文件名和路径大小写严格区分。如果你的HTML中CSS链接是/css/Style.css，但实际文件是/css/style.css，Chrome可能自动兼容，但Firefox/IE会返回404错误。

• 排查方法：查看网络面板中CSS请求的状态码，若为404，仔细核对链接路径与服务器上的文件路径、文件名大小写是否完全一致。

3. 检查跨域资源共享（CORS）配置 #

如果你的CSS文件托管在CDN或其他域名下，服务器需要正确配置CORS规则允许当前域名的请求。Chrome在某些场景下会放宽跨域限制，但Firefox/IE会严格拦截。

• 排查方法：查看CSS请求的响应头是否包含Access-Control-Allow-Origin，其值应包含你的网站域名（或在测试阶段用*，但生产环境不推荐）。
• 修复方案：在服务器或CDN后台添加CORS规则，允许你的主域名访问CSS资源。

4. 验证CSS文件编码与特殊字符 #

如果CSS文件使用了非UTF-8编码（比如中文注释用GBK），且线上服务器未指定正确的字符编码，Firefox/IE可能无法正常解析文件内容，而Chrome的编码自动检测能力更强，仍能加载。

• 排查方法：在开发者工具中查看CSS文件的响应内容，若出现乱码，说明编码有问题。
• 修复方案：将CSS文件转换为UTF-8编码，同时在HTML的<link>标签中添加charset="UTF-8"属性，或在服务器响应头中设置Content-Encoding: UTF-8。

5. 强制刷新浏览器缓存 #

有时候浏览器会缓存旧的错误资源，即使你已经修复了问题。可以尝试：

• Windows/Linux：按Ctrl+Shift+R强制刷新
• Mac：按Cmd+Shift+R强制刷新
• 或者直接清空浏览器缓存后重新测试

内容的提问来源于stack exchange，提问作者Truth