旧浏览器不支持 aspect-ratio 是因 chrome ≤87、safari ≤15.3 等环境直接静默丢弃该声明，@supports 也无法兜底；最可靠 fallback 是 padding-top 百分比方案，需配合 position: relative 和 absolute 子元素。
旧浏览器里 aspect-ratio 为什么直接消失？
不是 Tailwind 或你写错了，是 Chrome ≤87、Safari ≤15.3、IE/Edge ≤18、微信 X5、UC 和旧安卓 WebView 这些环境压根不识别 aspect-ratio 这个属性。它不会报错，也不降级，而是整条声明被静默丢弃——DevTools 的 Styles 面板里那行 CSS 可能标为 invalid，Computed 面板里搜不到该属性。
@supports (aspect-ratio: 1/1) 也兜不住：IE 和很多老 WebView 连 @supports 语法都不支持，整块规则会被跳过，fallback 样式根本不会执行。
padding-top 百分比方案怎么写才不踩坑？
这是目前最可靠、兼容性从 IE6 起就稳定的 fallback 方案，核心是利用 padding-top 的百分比始终按父容器宽度计算的特性。
- 百分比公式固定为：
padding-top = (height ÷ width) × 100%，例如 16:9 →padding-top: 56.25%，4:3 →padding-top: 75% - 父容器必须设
position: relative，否则子元素position: absolute会脱离定位上下文 - 内容层必须额外包裹一层
position: absolute; inset: 0（或top: 0; left: 0; width: 100%; height: 100%），否则文字/图片会塌进 padding 区域 - 别同时写
h-0和pt-[56.25%]再加aspect-[16/9]—— 层叠顺序会让旧浏览器取h-0，结果高度为 0
Flex/Grid 容器下 aspect-ratio 失效不是兼容性问题
aspect-ratio 只对 display: block 或 inline-block 元素生效。如果父容器是 flex 或 grid，子项默认是 display: flex 或 display: grid，此时 aspect-ratio 直接被忽略——浏览器不是不支持，是根本不进入比例计算逻辑。
典型表现：外层 flex 容器里加了 aspect-video，但子元素高度塌陷。
- 临时验证可加
block类强制覆盖display，但真正要解决，得调整布局结构 - 更稳的做法是：在 Flex/Grid 容器中改用 padding-top 方案，而不是硬套
aspect-ratio - 动态拼接比例时，别用字符串拼
"aspect-[" + w + "/" + h + "]"；Safari 对斜杠语法解析极不稳定，推荐预计算小数，如aspect-[0.5625]（即 9 ÷ 16）
Tailwind 不会自动注入 fallback 代码
Tailwind 只负责把类名编译成对应 CSS，它不检测浏览器能力，也不注入兼容性代码。你写 aspect-[16/9]，它就生成 aspect-ratio: 16 / 9;；你没手动写 pt-[56.25%] + relative + absolute 结构，就不会有 fallback。
这意味着：兼容性完全由你控制，不能指望框架兜底。
- 不要只靠
@supports包一层就认为万事大吉 - 构建工具如 PostCSS 若启用了 autoprefixer，默认不会加前缀，但某些插件会误删
aspect-ratio声明，上线前务必检查输出 CSS 是否被过滤 - 真实用户覆盖的浏览器版本，得用
caniuse.com查，别只看“主流”二字就开干
@supports，却渲染不出 aspect-ratio，而且对斜杠格式支持断裂——热更新、不同构建配置下，aspect-[9/16] 可能被忽略。这时候，预计算小数 + 手动 fallback 是唯一靠谱路径。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
