旧版ie（ie8及更早）完全不识别rem，会整条忽略css声明导致样式丢失；必须为所有rem属性前置px值，html根字号须用固定px定义，并手动验证fallback完整性。
旧版浏览器（IE8 及更早）根本不会解析 rem，不是“算错”，而是直接跳过整条 CSS 规则——所以你看到的“偏差”，其实是样式完全丢失后的视觉坍塌。
IE8 及更早版本根本不识别 rem，必须手动提供 px fallback
这些浏览器遇到不认识的单位（如 rem）时，会丢弃整条声明，连带后面的属性也不执行。哪怕你写了 font-size: 14px; font-size: 0.875rem;，IE8 也只认第一行，第二行被整条忽略。
-
px值必须写在rem值之前，顺序不可颠倒 - 所有用到
rem的属性都要配px：包括font-size、margin、padding、width、height等 - 不能依赖 PostCSS 插件（如
px2rem）自动生成 fallback——默认配置通常不保 IE8 兼容，需检查最终输出 CSS 是否真有前置px -
html根元素的font-size必须用固定px值（如font-size: 16px;），不能用%或em，否则老浏览器无法推导基准
font-size: 62.5% 在旧浏览器里是危险操作
这个写法本意是让 1rem = 10px，方便心算（比如 14px → 1.4rem），但它在 IE6–IE8 中会触发继承链断裂：百分比值依赖父元素计算，而 html 没有父元素，部分旧引擎会回退为 100% 或直接失效，导致后续所有 rem 失去参照。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- IE8 下
html { font-size: 62.5%; }实际可能解析为16px（即 100%），使1rem = 16px，和预期 10px 完全不符 - 更稳的方式是显式写死：
html { font-size: 10px; }（配合后续所有rem按 10px 基准换算） - 若需兼顾现代浏览器可访问性，旧项目升级时建议拆成两套：IE8 用固定
10px，其他浏览器用font-size: 100%+ JS 动态适配
媒体查询中用 rem 断点，在 IE11 和旧 Android WebView 里会错位
@media (min-width: 40rem) 这类写法，IE11 和 Android 4.4 WebView 会把 rem 解析成“当前已生效的 html 字体大小”，但此时 CSS 还没加载完或 JS 尚未运行，根字号可能是未定义状态，断点就失效或误判。
- 所有媒体查询断点统一改用
em：它在 MQ 中始终相对于浏览器默认字号（16px），稳定可靠 - 或者直接用
px：如@media (min-width: 640px)，虽然不响应缩放，但断点本就不该随字体变化 - 如果必须用
rem，得确保html { font-size: ... }是内联 CSS 最先加载的部分，不能靠外部 CSS 或 JS 注入
真正麻烦的从来不是怎么写 rem，而是你得同时盯着三套逻辑：IE8 的 px fallback、现代浏览器的系统缩放继承、以及移动端 Safari 那些隐式重设 visualViewport 导致的临时基准漂移——少验一个环境，上线就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
