旧浏览器静默丢弃aspect-ratio，必须手动用padding-top百分比降级：父容器position: relative、自身padding-top（如56.25%）、内容层position: absolute且inset: 0；@supports须外置且顺序正确，否则fallback失效。
旧浏览器（Chrome ≤87、Safari ≤15.3、IE/Edge ≤18、微信 X5、UC、旧安卓 WebView）根本不会解析 aspect-ratio，不是“不生效”，而是静默丢弃整条声明——DevTools 里划掉、Computed 面板里查不到、Console 无任何提示。必须手动 fallback，不能靠 @supports 自动兜底，也不能指望 PostCSS 或 Tailwind 自动生成。
padding-top 百分比是唯一稳定 fallback 方案
它基于 CSS2.1 规范，从 IE6 起就一致支持，原理简单：padding-top 的百分比值始终按父容器宽度计算，和新特性无关。但必须三者齐备：
- 父容器设
position: relative（否则absolute子元素会相对于body定位） - 自身设
padding-top: (height ÷ width) × 100%（如16/9 → 56.25%，手算错会导致比例严重失真） - 内容层用
position: absolute; inset: 0（或top: 0; left: 0; width: 100%; height: 100%），否则内容会被 padding 区域“吞掉”
@supports 必须外置且顺序不能错
@supports (aspect-ratio: 16/9) 在 Chrome ≤27、IE、X5 等环境里压根不支持，整块规则会被跳过。降级逻辑必须写在 @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) - 视频/图片容器务必套一层 ：直接给
或aspect-ratio基本无效，它们有固有尺寸，会覆盖该属性真正容易被忽略的是：老浏览器连
@supports都不认，降级必须写在外部；而现代浏览器里，aspect-ratio和padding-top共存时，顺序错了整个 fallback 就崩——不是没效果，是旧浏览器执行了错误的样式分支。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
