ios safari（尤其是13.3及更早）因不识别标准flex布局和部分尺寸声明，导致height、min-height、flex拉伸类被浏览器静默忽略；需加min-w-0打断默认min-width:auto行为，或改用absolute inset-0等兼容方案。
Tailwind CSS 在 iOS Safari（尤其是 iOS 13.3 及更早）上出现高度异常，不是“看起来不对”，而是 height、min-height、flex 拉伸类根本没生效——因为浏览器直接忽略这些 CSS 属性，连计算都不做。
为什么 h-64 或 min-h-screen 在 iOS Safari 里不占高度
旧版 Safari 不识别标准 Flex 布局和部分尺寸声明，导致依赖 flex 的高度撑开逻辑彻底失效。比如：
-
h-64生成的height: 16rem被正确解析，但若父容器是flex且未加-webkit-flex，子元素的h-64就会被父级布局压制为 0 -
min-h-screen在 iOS 13.3 及更早版本中，100vh本身有滚动条遮挡问题，而 Tailwind 默认不补-webkit-fill-available替代方案 - 用
flex-1撑高时，iOS Safari 默认给 flex 子项加min-width: auto，会阻断拉伸，必须显式覆盖
flex-1 / h-full 撑不满高度的修复写法
这不是类名选错，是 Safari 对 flex 子项的默认行为与现代规范冲突。关键不是加更多类，而是打断它的“自动最小宽度”逻辑：
- 在 flex 容器子项上加
min-w-0（对应min-width: 0），这是最轻量解法 - 如果子项是图片或内联元素，还要加
block或flex-shrink-0防止被压缩 - 避免混用
h-full和flex-1：前者依赖父级有明确高度，后者依赖 flex 上下文；iOS 下二者常互相抵消 - 真要确保填满，用
absolute inset-0+min-h-0更可靠（但需注意定位上下文）
aspect-ratio 和自定义高度的兼容写法
aspect-ratio 在 Safari 15.4+ 才原生支持，旧版会静默忽略；而 h-[50px] 这类 arbitrary value 虽然能生效，但若父容器宽度不可测，照样塌陷：
-
aspect-video必须配合w-full或max-w-md等显式宽度类，否则无基准可算高度 - 不要给
<img>直接加aspect-ratio类——它只对容器元素生效 - 需要精确像素高度时，优先用
h-[50px]，但确认 Tailwind 版本 ≥ v3.2；v3.1 及更早需在tailwind.config.js中手动注册theme.extend.height - Safari 14 及更早不支持
aspect-[9/16]斜杠语法，改用小数写法：aspect-[0.5625]
min-h-screen 在 iOS 上的实际表现差异
min-h-screen 编译为 min-height: 100vh，但在 iOS Safari 中，vh 会随地址栏显示/隐藏动态变化，导致页面跳动或高度突然缩水：
- 替代方案：用
min-h-[100dvh]（dvh是 device viewport height），但 iOS 16+ 才支持 - 兼容 fallback：加
min-h-[100vh]后再手写媒体查询覆盖@supports not (height: 100dvh) { ... } - 更稳妥做法：不用
vh单位，改用min-h-[700px]（根据主流 iPhone 屏高设一个安全值），并搭配max-h-screen防溢出 - 注意：Safari 对
100vh的处理还受viewportmeta 标签影响，务必检查是否含viewport-fit=cover
真正卡住人的从来不是“哪个类该用”，而是 Safari 对 CSS 规则的静默丢弃——它不报错，也不渲染，只留一片空白。验证方式很简单：打开 DevTools → Computed → 搜索 height 或 display，如果对应属性压根没出现在列表里，就不是 Tailwind 写错了，是浏览器根本没认这个规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
