旧版IE（IE8及更早）不识别rem，会直接忽略整条CSS声明导致页面崩塌；必须为所有rem属性显式前置px值，html根字号须用固定px定义，并手动验证fallback完整性。
旧版IE不解析rem时页面直接崩塌怎么办
rem 是相对于根元素（html）字体大小的单位，但 IE8 及更早版本完全不认识它——遇到 rem 会直接忽略整条 CSS 声明，导致布局错乱、文字消失或块级元素坍缩。这不是“显示不准”，而是“根本不认”。所以不能只加个 fallback 就完事，得让老浏览器有可执行的兜底路径。
- 必须为所有用到
rem的属性（如font-size、margin、padding、width）显式提供px值，且px行必须写在rem行之前 - 顺序错误（
rem在前、px在后）会导致 IE 仍取无效值，因为老浏览器按声明顺序解析，遇到不识别的单位就跳过整条规则，不会继续往后找 - 不要依赖预处理器自动插
pxfallback（比如 PostCSS px2rem 插件默认不保 IE8 兼容），需人工核对输出 CSS 是否真有前置px
如何手写兼容 rem 的 font-size 基准
根元素 font-size 是 rem 的源头，如果它本身用 rem 或百分比设值，旧浏览器可能无法递归推导——最稳的方式是给 html 设固定 px 值，再在此基础上用 rem 派生。
- 推荐写法：
html { font-size: 62.5%; } /* 配合 body { font-size: 16px; }，让 1rem = 10px */但注意：IE7/8 对%在html上的支持不稳定，更稳妥的是直接写html { font-size: 10px; } - 若项目需适配高清屏或动态缩放，避免用 JS 动态改
html.style.fontSize后再指望老浏览器重绘——IE8 不支持 DOM Style 属性的运行时更新，必须靠初始 CSS 定死 - 慎用
em设html字号，它会继承父级（如body），而老浏览器对继承链解析容易出偏差
PostCSS + px2rem 自动转换时哪些配置会漏掉 IE 兼容
很多团队用 postcss-px2rem 省事，但它默认只转非根元素，且不保证 px fallback 插入位置和完整性。
- 关键配置项必须显式开启：
fallback: true（生成px备用）、rootValue: 37.5（对应设计稿 750px / 20）、unitPrecision: 5（避免四舍五入误差累积） - 它不会处理内联样式（
）里的px，也不会修复第三方 UI 库（如 old Bootstrap）中硬编码的rem，这些要单独补丁 - 如果用了
rem做媒体查询（如@media (max-width: 40rem)），该插件完全不碰——老浏览器同样不支持，必须额外写@media (max-width: 400px)并确保它在rem版本之前
检查兼容性是否真生效的三个硬核动作
光看编译后 CSS 有 px 不代表能跑通，得验证老环境真实行为。
立即学习“前端免费学习笔记（深入）”；
- 在 IE8 虚拟机里打开开发者工具（F12），切换到 IE8 文档模式，用“选择元素”定位目标节点，看计算样式（Computed）里最终生效的是
px还是空白（说明rem导致整条被丢弃） - 禁用 JavaScript 后刷新页面——有些项目靠 JS 注入
html字号来激活 rem，关 JS 后 IE8 连基准都没，此时只能靠纯 CSS 的px基准顶住 - 搜索编译后 CSS 文件里是否存在孤立的
rem（如没配fallback的border-radius: .2rem），这种漏网之鱼在老浏览器里等于删掉那条样式
真正难的不是写出带 px 的 rem，而是确保所有分支路径（JS 控制的、媒体查询的、第三方引入的、内联写的）全被覆盖。漏一个，IE8 就可能白屏或错位，而且这种问题往往压测时才暴露。
