aspect-ratio 在 chrome ≤87 等旧浏览器中被静默丢弃，不解析也不报错；需用 padding-top 百分比（基于父宽）降级，并确保父容器 position: relative、内容层 absolute 定位且 inset: 0，同时避免与 height 或 flex/grid 冲突。
aspect-ratio 在旧版浏览器（Chrome ≤87、Safari ≤15.3、IE/Edge ≤18、微信X5、UC、旧安卓WebView）中根本不会解析，不是“报错”，而是静默丢弃——你写的那行 CSS 就像没写过一样。
为什么 aspect-ratio 在 Chrome 87 及更早版本里完全失效
Chrome 直到 88 版本才首次原生支持 aspect-ratio，此前所有版本（包括 87、86、80+）遇到该声明会直接跳过，DevTools 的 Elements 面板里它会被划掉或根本不显示，Console 里也不会报任何 CSS 解析错误。所谓“不生效”，本质是浏览器压根不认识这个属性。
PostCSS 的 autoprefixer 默认不处理 aspect-ratio（它没有标准前缀），但某些非官方插件反而会误删整行，上线前务必检查构建输出的 CSS 是否还存在该声明。
- 用
@supports (aspect-ratio: 1/1)包裹新写法时，旧版 Chrome 连@supports都不支持（Chrome 28+ 才支持），整块规则会被跳过 —— 降级逻辑必须写在外部，不能依赖它兜底 - 别信“自动兼容”宣传：构建工具不会帮你把
aspect-ratio: 16 / 9转成padding-top: 56.25%，这是语义断裂，必须手动实现
padding-top 百分比为什么能从 IE6 兼容到今天
因为 padding-top 的百分比值是基于父容器宽度计算的，这是 CSS2.1 就定义的稳定行为，所有浏览器都认。它不依赖新特性，只靠三件事：position: relative（父）、padding-top（自身）、position: absolute（内容层）。
- 公式固定：
padding-top = (height ÷ width) × 100%，例如 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会压扁内容，反而更糟
aspect-ratio 和 padding-top 混用时的关键顺序和陷阱
可以共存，但顺序错了就全崩：必须先写 fallback（padding-top），再用 @supports 覆盖为 aspect-ratio。这样旧浏览器执行第一段，新浏览器覆盖第二段。
- 正确顺序：
.container { padding-top: 56.25%; } @supports (aspect-ratio: 1/1) { .container { padding-top: 0; aspect-ratio: 16/9; } } - 错误顺序：
padding-top: 56.25%; aspect-ratio: 16/9;→ Safari 15.4+ 可能因内部尺寸重置导致高度意外变矮 - 不要对同一元素同时设
height和aspect-ratio；也不要对子内容用margin或flex居中 —— 它必须靠绝对定位塞满 - Flex/Grid 容器里
aspect-ratio失效，不是属性坏了，是布局优先级冲突：flex 或 grid 的收缩/拉伸逻辑会先锁定尺寸，把比例约束挤掉
真正容易被忽略的点：父容器宽度基准可能丢失
padding-top 百分比依赖父容器有明确宽度，但在现代布局中极易失效：
- 如果父容器是 flex item，且没设
flex-basis或min-width: 0，flex shrink 可能导致宽度基准为 0，padding-top: 75%算出来就是 0px - 如果父容器是 grid item，列轨道用
auto或min-content，行高无法锚定列宽，比例就断了 - 图片内容务必加
object-fit: cover，否则width: 100%; height: 100%会拉伸变形
这些细节不显眼，但一漏就整个比例塌陷，调试时往往要倒查三层 DOM 结构才能定位到父级 flex-basis 缺失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
