chrome 对 calc() 单位缺失更宽松，firefox 则严格校验；如 calc(100% - 20) 在 firefox 失效，chrome 可能自动补全或忽略；应始终显式写单位并避免不可运算单位混合。
Chrome 和 Firefox 对 calc() 的解析差异
Firefox 会严格校验 calc() 内部单位是否可运算，Chrome 则更宽松——比如 calc(100% - 20px) 在两者都正常，但 calc(100% - 20)（漏掉 px）在 Firefox 直接失效，Chrome 可能悄悄转成 calc(100% - 20px) 或忽略整个表达式。
实际场景常见于动态宽度计算或响应式栅格，尤其用 PostCSS 或构建工具自动注入值时容易丢单位。
- 始终显式写出单位：写
calc(100% - 20px)，别依赖自动推断 - 避免混合不可运算单位：
calc(1em + 1rem)合法，但calc(1em + 1px)在旧版 Safari（ - 用
@supports (width: calc(100% - 1px))做特性检测，别只靠 UA 判断
Safari 15.4+ 的 aspect-ratio 渲染异常
这个属性在 Safari 15.4–16.3 中存在一个隐藏问题：当父容器使用 display: grid 或 flex，且子元素同时设了 aspect-ratio 和 width: 100%，Safari 会错误地将高度撑满视口，而不是按比例缩放。
这不是语法错误，而是布局引擎对 intrinsic size 计算的偏差，开发者常误以为是自己写错了 CSS 顺序。
- 临时绕过：给父容器加
min-height: 0或align-items: start - 更稳方案：用伪元素 +
padding-top模拟宽高比，仅对 Safari 触发（@supports (-webkit-appearance: none) and (not (aspect-ratio: 1))） - 注意
aspect-ratio不影响max-width/min-height的优先级，这些限制仍需显式设置
IE11 兼容模式下 @keyframes 名称大小写敏感
在 IE11 的文档模式（哪怕是 Edge 模式）中，@keyframes myAnimation 和调用时写的 animation: MyAnimation 1s（首字母大写）会被视为两个不同动画——直接导致动画不触发，控制台也不报错。
这问题只在启用兼容性视图或企业内网强制 IE 模式时出现，本地开发很难复现，上线后用户反馈“动画卡住”才暴露。
- 所有
@keyframes名称统一用全小写 + 连字符，如fade-in，调用时也保持一致 - 避免用 JS 动态拼接动画名，如
el.style.animation = `${name} 1s`，IE11 下字符串比较区分大小写 - 如果必须支持 IE11，建议用
animation-name单独设值，而非写在animation复合属性里
font-display: swap 在 Firefox 中的 FOIT/FOUT 行为偏移
Firefox 对 font-display: swap 的 fallback 时间窗口判定比 Chrome 更激进：字体加载超时阈值默认约 3s（Chrome 是 3s 但含网络预判），且一旦触发 swap，后续即使字体加载完成也不会再回 Reflow，导致文字突然跳动两次（先闪 FOUT，再等字体加载完又闪一次）。
这对内容型站点影响明显，尤其首屏有大标题时，用户会感知到两次重绘。
- 用
font-display: optional替代，但需接受部分用户看到系统字体 - 配合
document.fonts.load()主动控制加载时机，在DOMContentLoaded后延迟 100ms 加载非关键字体 - 不要依赖
font-display单一属性解决所有字体问题；WebFont Loader 或自建 loading 状态更可控
浏览器解析 CSS 的底层逻辑差异，往往藏在看似“应该通用”的细节里。单位、大小写、时间阈值、回退策略——这些点不报错，但一上线就出视觉偏差，查起来最耗时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
