aspect-ratio在Chrome≤87等旧浏览器中被静默丢弃，不解析、不报错、不降级；必须手动用padding-top百分比（如56.25%）配合position: relative和absolute定位实现fallback，且@supports无法兜底。
aspect-ratio 属性本身就不被旧浏览器解析
不是 Tailwind 的问题，是 CSS 规范层面的缺失：Chrome ≤87、Safari ≤15.3、IE/Edge ≤18、微信 X5、UC、旧安卓 WebView 这些环境压根不识别 aspect-ratio 这个属性。它不会报错，也不会降级，而是直接静默丢弃整条声明——DevTools 的 Computed 面板里搜不到该属性，Styles 面板里那行 CSS 甚至可能被标为 invalid 或直接不显示。
别信 @supports (aspect-ratio: 1/1) 能兜底：IE 和很多老 WebView 连 @supports 语法都不支持，整块规则会被跳过，fallback 样式根本不会执行。
Tailwind 不会自动 fallback 到 padding-top 方案
Tailwind 只负责把类名编译成对应 CSS，它不判断浏览器能力，也不注入兼容性代码。你写 aspect-[16/9]，它就生成 aspect-ratio: 16 / 9；你没手动写 pt-[56.25%] + relative + absolute 结构，就不会有 fallback。
-
pt-[56.25%]的百分比是按父容器宽度算的，必须配合relative定位父容器 - 内容层得用
absolute inset-0（或top-0 left-0 w-full h-full），否则会被 padding 区域“吞掉” - 不能同时写
h-0和pt-[56.25%]再加aspect-[16/9]，层叠顺序会让旧浏览器取h-0，结果就是高度为 0
Safari 对斜杠语法 aspect-[16/9] 解析极不稳定
Safari 15.3–15.4 存在识别 @supports 却不渲染 aspect-ratio 的 bug，而且对斜杠格式支持断裂：构建后、Vite/HMR 热更新、甚至某些 Webpack 配置下，aspect-[9/16] 可能被忽略或解析失败。
立即学习“前端免费学习笔记（深入）”；
更稳的写法是小数：aspect-[0.5625]（即 9 ÷ 16），CSS 层面等价，且 Safari 15.4+ 兼容性可靠。动态拼接时也必须先算好小数再注入，别用字符串拼 "aspect-[" + w + "/" + h + "]"。
Flex/Grid 容器会让 aspect-ratio 失效，这不是兼容性问题而是布局优先级
aspect-ratio 只对 display: block 或 inline-block 有效。如果父容器是 flex 或 grid，子项默认是 display: flex 或 display: grid，此时 aspect-ratio 直接被忽略——浏览器不是不支持，是根本不进入计算逻辑。
典型表现：外层 flex 容器里加了 aspect-video，但子元素高度塌陷。临时验证可加 block 强制覆盖 display，但真正要解决，得调整布局结构或改用 padding-top 方案。
