老浏览器静默丢弃aspect-ratio，必须手动用padding-top百分比降级；其值按父宽计算，需父容器position: relative、自身padding-top、内容层position: absolute且inset: 0，@supports须外置，顺序错误或混写height会导致失效。
老浏览器根本不认识 aspect-ratio，不是“不生效”，而是静默丢弃——DevTools 里直接划掉、Console 无报错、Computed 面板里压根不出现。必须手动 fallback，不能靠构建工具或 @supports 自动兜底。
为什么 padding-top 百分比是唯一可靠 fallback
它基于 CSS2.1 规范，从 IE6 起就稳定支持，原理简单：padding-top 的百分比值始终按父容器宽度计算，和新特性无关。关键就三件事：
- 父容器设
position: relative - 自身设
padding-top: (height ÷ width) × 100%（如 16:9 →56.25%，4:3 →75%） - 内容层用
position: absolute; inset: 0或top: 0; left: 0; width: 100%; height: 100%
手算错百分比会导致比例严重失真；漏掉 position: relative，absolute 子元素会相对于 body 定位；没写 inset: 0，内容会被 padding 区域“吞掉”。
@supports 写法必须外置，不能用来兜底
@supports (aspect-ratio: 1/1) 在 Chrome ≤27、IE、微信 X5、UC 等环境里根本不受支持——整块规则会被跳过，更别说执行内部样式。降级逻辑必须写在 @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），旧浏览器可能解析失败；混写（如同时设 height: 0 和 padding-top）会让旧浏览器取 height: 0，直接压扁内容。
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基本无效，它们有固有尺寸，会覆盖该属性真正容易被忽略的是：老浏览器连
@supports都不认，降级必须写在外部；而现代浏览器里，aspect-ratio和padding-top共存时，顺序错了整个 fallback 就崩——不是“多写点保险”，而是结构本身决定了兼容性边界。
