IE11中CSS加载后变形的主因是现代特性支持断裂：IE11不支持grid、flex部分语法（如flex: 0 1 auto）、gap及CSS变量嵌套，导致样式被忽略或降级；Edge Legacy存在rem计算异常；Firefox ESR对var()解析脆弱；企业代理还可能篡改CSS响应。
页面在企业旧版浏览器（如 IE11、Edge Legacy、老版本 Chrome/Firefox）中加载 CSS 后变形，不是 CSS 没加载，而是**样式被解析或渲染时被部分忽略、降级或误解释**——根本原因在于浏览器对现代 CSS 特性的支持断裂，而非网络层失败。
IE11 里 flex/grid 布局塌陷或错位
IE11 对 flex 的实现不完整（比如不支持 flex: 0 1 auto 缩写、align-items: stretch 在某些嵌套下失效），而 grid 几乎完全不支持（仅实验性 -ms-grid，且语法完全不同）。一旦你写了 display: grid，IE11 直接跳过整条规则，后续依赖该布局的子元素就会回退到文档流原始位置，造成“错位”或“堆叠”。
- 检查 Elements 面板中目标容器的 computed 样式：若
display显示为block或未生效，说明该声明被忽略 - 避免混合使用
flex和grid；对 IE11 必须用float+clearfix或display: table-cell降级 - 慎用
gap：IE11 不支持，需改用margin模拟，且注意父容器是否触发 BFC
Edge Legacy 渲染 font-size/rem 计算异常
Edge Legacy（非 Chromium 版）在缩放设置非 100% 时，会错误地将 rem 基准（html { font-size: 16px }）与系统 DPI 混合计算，导致所有基于 rem 的尺寸放大/缩小失真，容器宽高比例崩坏、文字溢出、媒体查询断点偏移。
- 打开
edge://settings/appearance→ 强制设为“页面缩放：100%” - 避免在根元素上用媒体查询动态改
font-size；如必须，改用vw或 JavaScript 动态写内联style - 用
em替代部分rem：它继承父级字体大小，在 Edge Legacy 中更稳定
Firefox ESR 版本拒绝解析含 CSS 变量的规则块
企业常部署 Firefox ESR（Extended Support Release），例如 115.x 版本虽支持 var(--x)，但若变量定义在 @media 内部、或被 calc() 包裹时出现语法歧义，Firefox 会静默丢弃整个规则块（包括后面的声明），导致后续样式链式失效。
立即学习“前端免费学习笔记（深入）”；
- 在 Console 中执行
getComputedStyle(document.documentElement).getPropertyValue('--main-color')，返回空字符串即变量未注册 - 所有
:root变量必须在最外层定义，禁止嵌套在@supports或@media中 - 避免
var(--x, calc(100% - 20px))这类 fallback 嵌套；ESR 对 fallback 解析极脆弱
企业代理或安全策略注入干扰 CSS 解析
很多政企内网强制启用透明代理或终端安全软件（如深信服、奇安信），会在响应头插入自定义脚本、重写 HTML 或注入 CSS，导致原始 link 标签被篡改（如 href 被 prepend 了内部 CDN 前缀）、或在 style 标签内插入冲突规则（如强制 !important 覆盖你的 z-index）。
- 在 Network 面板点击任意 CSS 请求 → 查看 Response → 检查开头是否有非 CSS 内容（如 HTML 注释、JS 脚本）
- 对比无代理环境（如手机热点）下同一页面表现：若正常，则锁定是中间设备干预
- 联系 IT 部门确认是否启用“网页内容审计”或“CSS 规则增强防护”，需白名单放行你的域名和资源路径
真正棘手的不是“样式没加载”，而是“加载了但被浏览器半途扔掉”——这种问题不会报 404，Network 面板显示 200，Elements 面板里规则存在，却在 computed 样式里消失。诊断时务必跳过“有没有加载”这一步，直接进 computed 验证最终生效值。
