aspect-ratio在Chrome≤87、Safari≤15.3等旧浏览器中被静默丢弃，必须手动用padding-top百分比（如56.25%）+position:relative/absolute结构fallback，且降级样式须写在@supports外层，不可依赖其兜底。
直接说结论：aspect-ratio 在 Chrome ≤87、Safari ≤15.3、IE/Edge ≤18、微信 X5、UC、旧安卓 WebView 中被**静默丢弃**——不报错、不降级、DevTools 里都搜不到该属性。Tailwind 不会自动 fallback，必须手动写 padding-top + relative/absolute 结构。
为什么 @supports (aspect-ratio: 1/1) 根本兜不住
@supports 本身在 IE 和很多老 WebView 中就不被识别，整块规则会被跳过，fallback 样式压根不会执行。更糟的是，Safari 15.3–15.4 存在“识别 @supports 但不渲染 aspect-ratio”的 bug，导致你写了也白写。
- 降级逻辑必须写在
@supports外层，例如先设padding-top: 56.25%，再用@supports覆盖它 - 别信某些 PostCSS 插件会自动补
padding-top，它们通常只处理语法前缀，对aspect-ratio无动于衷 - 构建后务必检查最终 CSS 文件：确认
padding-top规则存在，且未被误删
怎么手写可靠的 padding-top fallback
这是唯一从 IE6 起就稳定支持的方案，原理简单：padding-top 的百分比始终按父容器宽度计算。
- 公式固定：
padding-top: (height ÷ width) × 100%，如16/9 → 56.25%、4/3 → 75%；算错会导致比例严重失真 - 父容器必须设
position: relative，否则子元素position: absolute会相对 body 定位 - 内容层需包裹并设
position: absolute; inset: 0（或top-0 left-0 w-full h-full），否则内容会被 padding 区域“吞掉” - 避免同时写
h-0和pt-[56.25%]再加aspect-[16/9]——旧浏览器取h-0，结果高度为 0
为什么 aspect-[16/9] 在 Safari 里经常失效
Safari 15.4 之前对斜杠语法解析极不稳定，Vite/HMR 热更新、Webpack 配置变动都可能导致 aspect-[9/16] 被静默忽略。构建后检查 computed 样式，若没出现 aspect-ratio，基本就是这问题。
立即学习“前端免费学习笔记（深入）”；
- 改用小数写法：
aspect-[0.5625]（即 9 ÷ 16），CSS 层面等价，Safari 15.4+ 兼容性可靠 - 动态拼接时必须先算好小数再注入，别用字符串拼
"aspect-[" + w + "/" + h + "]" - Flex/Grid 容器会让
aspect-ratio失效——不是兼容性问题，是布局优先级：子项默认display: flex或display: grid，此时该属性直接被忽略 - 临时验证可加
block强制覆盖 display，但真正要解决，得调整布局结构或退回padding-top方案
最易被忽略的一点：视频/图片容器必须套一层 <div>。直接给 <video> 或 <img> 加 aspect-ratio 基本无效，因为这些标签默认不是 block，且内部渲染逻辑不响应该属性。
