旧版浏览器不支持aspect-ratio，必须用padding-top百分比降级；需设position: relative和absolute定位内容；@supports必须外置且不能取反；flex/grid中需确保宽度可推导。
旧版浏览器（Chrome ≤87、Safari ≤15.3、IE/Edge ≤18、微信 X5、UC、旧安卓 WebView）根本不会解析 aspect-ratio —— 不报错、不警告、DevTools 里直接划掉，等于没写。必须手动用 padding-top 百分比降级，且不能靠构建工具或 @supports 自动兜底。
为什么 padding-top 百分比是唯一可行 fallback
它基于 CSS2.1 规范，从 IE6 起就稳定支持：padding-top 的百分比值始终按父容器宽度计算，不依赖任何新特性。这个行为在所有旧内核中一致，而 aspect-ratio 是全新语法，没有前缀形式（如 -webkit-aspect-ratio），autoprefixer 默认不处理，非官方插件还可能误删整行。
-
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 写法必须外置，不能当兜底逻辑
@supports (aspect-ratio: 1/1) 在 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>：直接给 <code><video></video>或<img>设aspect-ratio基本无效（它们有固有宽高比）最易被忽略的是：哪怕你写了正确的
padding-top+position: relative+inset: 0，如果父容器本身宽度不可知（比如 flex 子项未设flex-basis或 grid 轨道未留弹性），padding 计算就会失准——比例不是靠“写对”实现的，而是靠整个链路的宽度可推导性。
