aspect-ratio在Chrome≤87中被浏览器静默丢弃，不解析、不报错；唯一可靠fallback是padding-top百分比方案，基于CSS2.1规范，从IE6起全兼容，需配合position: relative父容器和position: absolute内容层，且@supports必须外置并后置覆盖。
aspect-ratio 在 Chrome ≤87 中根本不会被解析——不是不生效，而是浏览器静默丢弃整条声明，DevTools 里直接划掉或根本不显示。必须手动降级，不能靠前缀、构建工具或 @supports 自动兜底。
为什么 padding-top 百分比是唯一靠谱的 fallback
它基于 CSS2.1 规范，从 IE6 起就稳定支持：padding-top 的百分比值始终按父容器宽度计算，不依赖任何新特性。所有旧内核（包括微信 X5、UC、旧安卓 WebView）都认这个行为。
-
padding-top: 56.25%对应 16:9（9 ÷ 16 = 0.5625），手算错误会导致比例严重失真 - 父容器必须设
position: relative，否则子元素position: absolute会相对于body定位 - 内容层需包裹并设
position: absolute; inset: 0（或top: 0; left: 0; width: 100%; height: 100%），否则内容会被 padding 区域“吞掉” - 避免同时写
height: 0和padding-top后又加aspect-ratio——旧浏览器取height: 0，直接压扁
@supports (aspect-ratio: 1/1) 必须外置且顺序不能错
@supports 在 Chrome 28+ 才支持，而 Chrome 21–27 连整个规则块都会跳过，更别说执行内部样式。降级逻辑必须写在 @supports 外部，新浏览器再覆盖。
- 正确顺序：
.ratio-box { position: relative; width: 100%; padding-top: 56.25%; }→ 再写@supports (aspect-ratio: 16/9) { .ratio-box { padding-top: 0; aspect-ratio: 16/9; } } - 别写
@supports not (aspect-ratio: 1/1)——部分旧 WebView 解析失败会整段丢弃，导致无样式 - Safari 15.3–15.4 存在“识别
@supports但不渲染aspect-ratio” 的 bug，此时 fallback 样式根本不会触发
Flex/Grid 容器中 aspect-ratio 失效的典型原因
aspect-ratio 只在元素有明确可推导宽度时才生效。而 flex 或 grid 的收缩/拉伸逻辑会先锁定尺寸，把比例约束挤掉。
- Flex 场景：子项若带
flex: 1或显式min-width: 0，会强制压缩；临时加flex-shrink: 0可验证是否为此问题 - Grid 场景：若列宽写死（如
grid-template-columns: 200px 200px），子项再设aspect-ratio也无效；改用1fr或minmax(0, 1fr)留弹性空间 - 视频/图片容器务必套一层
<div>：直接给<video>或<img>设aspect-ratio基本无效
Tailwind 用户特别注意的坑
Tailwind 不会自动 fallback 到 padding-top 方案。你写 aspect-[16/9]，它就生成 aspect-ratio: 16 / 9；没手动写 pt-[56.25%] + relative + absolute 结构，就不会有 fallback。
立即学习“前端免费学习笔记（深入）”；
-
pt-[56.25%]的百分比是按父容器宽度算的，必须配合relative定位父容器 - 内容层得用
absolute inset-0（或top-0 left-0 w-full h-full），否则会被 padding 区域“吞掉” - Safari 对斜杠语法
aspect-[16/9]解析极不稳定；更稳的写法是小数：aspect-[0.5625]（即 9 ÷ 16） - Flex/Grid 容器会让
aspect-ratio失效——不是兼容性问题，而是布局优先级：子项默认是display: flex或display: grid，此时aspect-ratio直接被忽略
width/height 属性）不是历史包袱，而是 SSR 渲染和 JS fallback 的关键锚点。 
