跨设备跨浏览器场景下CSS次日突然全部失效如何解决

按优先级从高到低逐一验证，都是同类问题里开发者踩过的实坑：

• 先做基础定位：打开任意出问题的项目，按F12打开开发者工具切到「网络」面板，刷新页面，筛选CSS类请求，看请求状态：
  • 如果状态显示blocked/已被客户端拦截：这是跨设备CSS失效最高发的原因，100%是全局拦截类问题。先确认你出问题的PC和Chromebook是不是长期连同一个WiFi/同一个网络出口，检查所有设备是否安装了同款广告拦截、隐私防护、杀毒类软件，或是开了系统级的网络过滤规则——这类工具大概1个月前集中更新过规则库，很多会误拦截MIME类型为text/css的请求，把本地开发地址加到白名单、或是临时关闭这类工具的全局网络过滤就能恢复。
  • 如果CSS请求返回200但样式不生效：点进请求看响应头的Content-Type字段，要是值不是text/css而是text/plain/其他类型，就是你开的全局代理/VPN/网络转发工具篡改了响应头，浏览器会因为MIME类型不匹配拒绝加载CSS，把本地开发地址加到代理直连列表、临时关闭全局代理即可解决。
  • 如果CSS请求返回404/路径错误：检查你是不是1个月前改过本地开发服务器的根目录配置、或是所有项目共用的公共静态资源路径，统一修正引用路径就行。
• 做最小场景复现排除代码问题：新建一个空文件夹，写两个最基础的测试文件，不要用任何框架、构建工具、插件，直接把html文件拖进浏览器打开：

  <!-- test.html -->
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <style>body { background: #f00; }</style>
    <link rel="stylesheet" href="./test.css">
  </head>
  <body>测试内容</body>
  </html>
  

  /* test.css */
  body { color: #ff0; font-size: 32px; }
  

  • 如果这个测试页样式都不生效：检查系统和浏览器的辅助功能设置，是不是开了强制高对比度模式、强制忽略网页自定义样式的选项，Windows系统主题、Chromebook无障碍显示设置、Chrome辅助功能里的相关选项开了之后，会直接覆盖所有网页的CSS样式，关掉对应开关即可。
  • 如果这个测试页正常：用浏览器的无插件/访客模式打开你之前出问题的项目，要是恢复正常，就是你所有浏览器都装了同一款有bug的开发者插件（比如CSS调试插件、强制暗色插件、脚本拦截插件），这类插件更新后可能出现拦截所有外部CSS的问题，逐个禁用排查即可。
• 别着急转后端，这类跨设备共性问题基本都是全局配置/网络规则的小问题，排查完上面的步骤99%能定位到原因，没有你想的那么复杂。

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