aspect-ratio在Chrome 87及更早版本中被浏览器静默丢弃，不解析也不报错；Chrome 88+、Firefox 89+、Safari 15.4+才原生支持，旧版IE、Edge≤18、微信X5、UC及旧安卓WebView均不支持。
aspect-ratio 在 Chrome 87 及更早版本里根本不会解析
它不是“不生效”，而是被浏览器静默丢弃——你写的 aspect-ratio: 16 / 9 在 DevTools 的 Elements 面板里会被划掉，或者干脆不显示；Console 里也不会报任何错误。Chrome 直到 88 版本才首次原生支持该属性，Firefox 89+、Safari 15.4+（即 iOS 15.4 / macOS 12.3+）同理。IE、Edge ≤18、微信 X5 内核、UC、旧版安卓 WebView 全都不认这个声明。
实操建议：
- 别依赖构建工具“自动兼容”：PostCSS 的 autoprefixer 默认不处理 aspect-ratio（它没有标准前缀），但某些非官方插件反而会误删整行，上线前务必检查输出 CSS 是否还存在该声明
- 别用 @supports (aspect-ratio: 1/1) 包裹降级逻辑：旧版 Chrome 连 @supports 都不支持（Chrome 28+ 才支持），整块规则会被跳过，降级必须写在外部
- 查兼容性别只看“主流”：用 caniuse.com 查目标用户实际覆盖的浏览器版本，比如微信内嵌页大概率跑在 X5 内核上，它至今不支持
padding-top 百分比方案为什么能从 IE6 兼容到今天
因为 padding-top 的百分比值是基于父容器宽度计算的，这是 CSS2.1 就定义的稳定行为，所有浏览器都认。它不依赖新特性，只靠三件事：position: relative（父）、padding-top（自身）、position: absolute（内容层）。
实操建议：
- 公式固定为：padding-top = (height ÷ width) × 100%，例如 16:9 → padding-top: 56.25%，4:3 → padding-top: 75%，手算错会导致比例失真
- 父容器必须设 position: relative，否则子元素 position: absolute 会相对于 body 定位，彻底脱离上下文
- 内容层不能只写 width: 100%; height: 100%，得加 top: 0; left: 0; 或 inset: 0，否则可能被 padding 区域“吞掉”
- 避免同时写 height: 0 和 padding-top 后又加 aspect-ratio——现代浏览器取后者，但旧版因 height: 0 会压扁内容，反而更糟
@supports (aspect-ratio: 1/1) 的正确用法和陷阱
可以共存，但顺序错了就全崩：必须先写 fallback（padding-top），再用 @supports 覆盖为 aspect-ratio。这样旧浏览器执行第一段，新浏览器覆盖第二段。
实操建议：
- 正确顺序：.container { padding-top: 56.25%; } → 然后 @supports (aspect-ratio: 1/1) { .container { padding-top: 0; aspect-ratio: 16/9; } }
- 不要写 @supports not (aspect-ratio: 1/1)：有些旧浏览器解析失败会整段丢弃，导致无样式
- @supports 在 IE 中被忽略（IE 不支持该规则，直接跳过），在 Edge 12+ 和 Chrome/Firefox 中正常工作，是唯一靠谱的分界线
- 不要用 UA 判断做降级：UA 字符串易伪造、难维护，特性检测才是正解
Flex/Grid 容器中 aspect-ratio 失效的真实原因
不是属性坏了，是布局优先级冲突。aspect-ratio 只在元素有“可推导宽度”时才计算高度；而 flex 或 grid 的收缩/拉伸逻辑会先一步锁定尺寸，把比例约束挤掉。
实操建议：
- Flex 场景：子项若带 flex: 1 或显式 min-width: 0，会强制压缩，aspect-ratio 形同虚设；临时加 flex-shrink: 0 可验证是否为此问题
- Grid 场景：若列宽写死（如 grid-template-columns: 200px 200px），子项再设 aspect-ratio 也无效；改用 1fr 或 minmax(0, 1fr) 留弹性空间
- 视频/图片容器务必套一层 div：直接给 或 aspect-ratio 无效（它们有固有宽高比），应设在父容器上，并配合 object-fit
真正容易被忽略的是：padding-top 方案里那个“父容器必须 position: relative”不是可选项——它决定了绝对定位内容的参考系。漏掉这句，整个布局会在不同设备上漂移，而且很难复现和调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
