ios 12 safari会静默丢弃不识别的css声明，兼容关键在于前置fallback、控制解析顺序及避开引擎缺陷：需写display: -webkit-flex; display: flex;，渐变用transparent或8位hex并双写带-webkit前缀，var()必须拆分为独立声明，且fallback须在同一选择器内连续书写。
旧版 iOS Safari（尤其是 iOS 12 及更早）不是“样式有点偏差”，而是会静默丢弃整条 CSS 声明——rgba()、var()、aspect-ratio、display: flex 等，只要它不认识，就直接跳过，不报错、不警告、不降级。兼容的核心不是“加前缀”，而是“前置 fallback + 控制解析顺序 + 避开引擎缺陷”。
flex 布局在 iOS 12 里完全不生效？先确认是否生成了 -webkit-flex
iOS 12.0–12.4 的 WebKit 引擎根本不识别 display: flex，只认 display: -webkit-flex。Tailwind 默认不会输出这个前缀，除非你明确告诉 Autoprefixer 要支持它：
-
.browserslistrc必须包含ios_saf >= 12.0或safari >= 12（不能只写last 2 versions，它会跳过低占比旧版本） - 运行
npx browserslist验证输出里是否真有safari 12或ios_saf 12.0-12.4 - 容器类如
flex、justify-center生成的 CSS 必须是：display: -webkit-flex; display: flex;，且带前缀的必须写在前面 - 子项若撑不满高度，大概率是
min-width: auto阻断拉伸，加min-w-0或手写[min-width:0]
颜色和渐变一用就黑？别信 rgba()，改用 transparent 或 8 位 hex
iOS 12 Safari 解析 linear-gradient() 时，遇到 rgba(0,0,0,0.3) 会直接渲染成黑块，不是透明，是黑色。这不是写法错，是引擎拒收：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 所有渐变里的透明色统一换成
transparent（安全、通用）或#0000004D（等价于rgba(0,0,0,0.3)，iOS 13+ 支持） - 必须双写渐变：先
-webkit-linear-gradient(to right, #000, transparent)，再linear-gradient(to right, #000, transparent)，顺序不能反 - 禁用角度写法（如
90deg），旧 WebKit 只认to right这类关键词 - 绝对不要用
background简写覆盖渐变，它会清掉background-image；拆成background-color+background-image
var(--color) 在 iOS 12 里根本没走 fallback？因为整条声明被跳过了
var(--primary, #333) 在 iOS 12 中不会退到 #333，而是整行被忽略——浏览器连 var() 语法都不认识，后备值压根不进解析流程：
- 正确写法是两行独立声明：
color: #333;换行再写color: var(--primary);，老浏览器只执行第一行 -
@supports (color: var(--x))是唯一能触发现代浏览器替换的条件，但必须把 fallback 写在@supports块之前 - 禁止在 fallback 里嵌套
var()，比如var(--a, var(--b))，旧 Safari 会卡死解析 - PostCSS 的
postcss-custom-properties插件无法处理动态设置或嵌套变量，真机测试比本地预览重要十倍
哪些特性 iOS 12 根本不支持，只能 JS 替代或降级？
有些 CSS 特性在 iOS 12 里是“零支持”，加前缀也没用，必须换思路：
-
overscroll-behavior：iOS 12 完全不识别，且依赖滚动容器已激活（需设height+overflow-y-auto），建议用touch-pan-y+ JS 阻断穿透 -
position: sticky：iOS 12.2 及更早版本无效，-webkit-sticky是伪概念，不存在；必须用 scroll 监听 +position: fixed模拟 -
aspect-ratio：iOS 15.4 才原生支持，iOS 12 必须用 padding-top 百分比 hack 或 JS 动态设 height -
scrollbar-width: none：只能用[&::-webkit-scrollbar]:hidden，且必须配合overflow-y-auto保留滚动能力
最易被忽略的一点：所有 fallback 必须写在同一选择器内、连续声明、静态值在前。跨 class、媒体查询或 @supports 外层包裹，都会让旧 Safari 失去兜底机会。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
