低版本浏览器完全忽略aspect-ratio，必须用padding-top百分比手动降级；需外置fallback、包裹替换元素、注意flex压缩问题。
低版本浏览器（Chrome ≤87、Safari ≤15.3、IE/Edge Legacy、微信 X5、UC）根本不解析 aspect-ratio，不是“不生效”，而是直接静默丢弃——DevTools 里划掉、Computed 面板里压根不出现、控制台零报错。必须手动 fallback，不能靠 @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定位 - 没写
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 会跳过整块规则；Safari 15.0–15.3 下也不触发、不报错，整个规则块被忽略。降级样式必须写在 @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再写 fallback），旧浏览器可能解析失败 - 不能写成
@supports not (aspect-ratio: 1/1)—— 旧浏览器连@supports都不认，整句无效
video/img 等替换元素必须套容器，不能直接设 aspect-ratio
video 和 img 是替换元素，其宽高比由元数据决定，aspect-ratio 对它们完全不生效。你在 DevTools 里看到该属性被划掉、高度为 0，就是这个原因。
立即学习“前端免费学习笔记（深入）”；
- 必须用外层
<div class="video-wrapper">包裹，设width: 100%+aspect-ratio: 16 / 9 -
video标签本身要清空内联width/height属性，再设width: 100%; height: 100%; object-fit: cover - Flex/Grid 中若子项带
flex: 1或min-width: 0，会强制压缩，临时加flex-shrink: 0可验证是否为此问题
真正容易被忽略的是：老浏览器连 @supports 都不认，降级必须写在外部；而现代浏览器里，aspect-ratio 和 padding-top 共存时，顺序错了整个 fallback 就崩——不是“多写点保险”，而是结构本身决定了执行路径。
