老浏览器兼容性下 font-size 应统一用 px（如 14px），确保渲染一致；需响应式时可 JS 动态设置根字体再用 rem，但须判断 document.documentElement 是否存在；禁用 em 多层嵌套、% 单位及 zoom/filter 缩放。
font-size 用 px 还是 rem？老浏览器兼容性怎么选
老浏览器（比如 IE8 及更早、部分国产双核浏览器的兼容模式）不支持 rem、em 在根元素外的相对计算，也不支持 vw/vh。直接写 font-size: 1.2rem 在 IE8 会失效，回退成浏览器默认大小。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 基础文字尺寸统一用
px（如font-size: 14px），确保所有浏览器渲染一致 - 若需响应式缩放，可配合 JS 动态改
document.documentElement.style.fontSize，再用rem，但得先判断document.documentElement是否存在（IE6–8 不支持） - 避免在 IE8- 中混用
em做多层嵌套字号，容易因继承链断裂导致意外缩放
IE6–8 下 font-size 的继承行为和常见失效现象
IE6–7 中，font-size 在某些 inline 元素（如 <span></span> 包裹 <strong></strong>）里可能不继承父级设置；IE8 开始基本正常，但仍对 font 简写属性敏感——如果写了 font: 12px/1.5 "Arial" 却漏了字号，整个声明会被忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式声明
font-size，别依赖简写font推导 - 避免用
%设定字号（如font-size: 80%），IE6 对百分比继承计算有 bug，常导致字体忽大忽小 - 测试时重点看
<button></button>、<select></select>内文字——这些控件在 IE 下默认字号常与 body 不一致，需单独重置
用 CSS filter 或 zoom 强制缩放文字？风险在哪
有人用 zoom: 0.9 或 filter: scale(0.9) 模拟字号调整，但这不是真正的文字缩放：它只缩放渲染结果，不改变盒模型尺寸、不触发字体抗锯齿重算，且 zoom 是 IE 私有属性，filter: scale() 在 IE9+ 才支持，Firefox 早期也不认。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 绝对不要用
zoom控制正文文字大小——它会让表单控件错位、影响 line-height 计算，且 Chrome 已弃用 -
transform: scale()只适合局部动效，不能用于段落文字，否则会导致文本模糊、焦点框错位、屏幕阅读器读取异常 - 若必须适配超小屏设备，优先用媒体查询 +
px阶梯式调整，例如：@media (max-width: 320px) { body { font-size: 12px; } }
font-size-adjust 和 system-ui 字体栈对老浏览器的影响
font-size-adjust 用于保持不同字体下 x-height 一致，但 IE 完全不支持，Chrome 直到 43 才支持，Safari 也较晚。而 system-ui 这类新字体名在 IE 和 Android 4.x WebView 中会被整个 font-family 声明忽略，导致回退到 serif 或更糟。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 老项目中禁用
font-size-adjust，用固定line-height+px字号组合控制行间一致性 -
font-family必须以通用族名收尾（如font-family: "Helvetica Neue", Arial, sans-serif），否则 IE 可能不渲染文字 - 如需兼顾现代与老旧环境，可用
@supports包裹新特性，但注意 IE 完全不识别该规则，所以它只是“现代浏览器增强”，不是兼容方案
老浏览器调字号的本质，是放弃弹性、接受静态。真正难的不是写对一行 font-size，而是当 px 成为唯一可信单位时，如何让整套 UI 在不同分辨率下仍保持可读性与比例协调——这往往要靠设计侧提前切分字号阶梯，而不是靠 CSS 自动推导。
