IE8及更早版本不支持rem，会整条忽略CSS声明导致布局崩塌；必须为所有rem属性前置px值、html根字号用固定px定义（如10px）、并手动验证fallback完整性。
不支持 rem 的浏览器（如 IE8 及更早）不是“计算不准”，而是直接忽略整条 CSS 声明——文字消失、盒子坍缩、布局崩塌都是常态。必须用显式 px fallback + 严格顺序 + 根字号硬编码三者配合，缺一不可。
为什么 px 必须写在 rem 前面？
IE8 解析 CSS 时，遇到不认识的单位（如 rem）会跳过**整条声明行**，不会继续往后读同一属性的其他值。哪怕你写了两行 font-size，它也只认第一行。
-
font-size: 14px;→ 被执行 -
font-size: 0.875rem;→ 整行被丢弃，不参与任何计算
反过来写就全失效：font-size: 0.875rem; font-size: 14px; 在 IE8 中两行都无效（第二行因语法错误被忽略）。
html 根字号为什么不能用 62.5%？
百分比在 IE6–IE8 的 html 元素上行为不可靠：部分引擎将其视为 100%（即 16px），导致后续所有 rem 基准错乱。比如本意是 1rem = 10px，实际变成 1rem = 16px，整个换算体系崩溃。
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全写法：
html { font-size: 10px; } - ❌ 危险写法：
html { font-size: 62.5%; }（尤其混杂模式下） - ⚠️
em或rem设根字号 → IE8 无法递归解析，彻底失效
哪些属性必须补 px fallback？
所有可能用到 rem 的属性都要单独处理，不能只改 font-size 就以为万事大吉。IE8 对每个属性独立校验单位，任一属性缺失 px 行，该属性就丢失。
-
font-size、margin、padding、width、height、max-width、border-radius - 媒体查询里的
@media (min-width: 40rem)同样不被识别 → 必须额外写@media (min-width: 400px)并确保它出现在rem版本之前 - 内联样式（
style="..."）中的rem不会被 PostCSS 插件处理 → 需人工替换或 JS 注入
PostCSS px2rem 插件容易漏掉什么？
默认配置只转非根元素，且不保证 px fallback 插入位置正确。光看输出 CSS 有 px 行不代表 IE8 能跑通。
- 必须显式开启：
fallback: true、rootValue: 10（对应html { font-size: 10px; }） - 第三方库（如旧版 Bootstrap）里硬编码的
rem不会被处理 → 单独补丁或覆盖样式 - 构建后务必打开 IE8 真机或虚拟机，检查计算样式（Computed tab）是否真取到了
px值，而不是继承或初始值
最麻烦的从来不是怎么写 rem，而是你得同时盯住三件事：IE8 的 px 是否真生效、现代浏览器的缩放是否被意外破坏、以及移动端 Safari 对根字号的隐式重设是否干扰了布局逻辑。
