现代Safari（iOS 16.4+/macOS 13.3+）已移除对-webkit-flex等旧前缀的支持，混写display: -webkit-flex; display: flex会导致前者被丢弃甚至中断整条规则解析，应仅对无标准替代的属性（如-webkit-line-clamp）加前缀。

为什么加 -webkit- 前缀反而让 Safari 布局更糟

现代 Safari（iOS 16.4+ / macOS 13.3+）已移除对大量旧前缀的支持，比如 -webkit-flex、-webkit-align-items 这类写法会被直接丢弃，甚至触发整条 CSS 规则解析中断。它只认标准属性——前提是目标版本已实现该特性。

• 查 caniuse.com 确认你支持的最低 Safari 版本是否原生支持该特性（例如 aspect-ratio 从 Safari 15.4 起无需前缀）
• 仅对至今无标准替代的属性加前缀，如 -webkit-line-clamp
• 避免混写：display: -webkit-flex; display: flex; → 现代 Safari 只取后者，前者纯冗余且可能干扰解析

Flex 布局在 Safari 10–14 中错位的硬解法

Safari 旧版 Flexbox 实现有多个已知偏差：子项不换行、align-items: stretch 不拉伸、min-width: 0 被忽略导致内容撑破容器。这不是代码写错了，是引擎缺陷。

• 对 flex-wrap: wrap 容器，显式加 align-content: flex-start 可修复 Safari 10.x 的换行错位
• 避免依赖 min-width: 0 控制换行；改用 flex-basis: 0 + flex-grow: 1
• 别用 flex: 1 简写——Safari 13.1 对该简写的解析不稳定，拆成 flex-grow: 1; flex-shrink: 1; flex-basis: 0%

position: sticky 在 Safari 里“粘不住”的真实原因

Safari 中 position: sticky 失效，90% 是祖先元素 overflow 静默禁用，或旧版缺失 position: -webkit-sticky 声明——它不报错，只在 DevTools 里把 position 显示为 static。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 逐级检查 sticky 元素所有祖先节点的 overflow-x 和 overflow-y，临时删掉 hidden / auto 看是否恢复
• 不能删 overflow 时，用 clip-path: inset(0) 替代——视觉裁剪一致，但不创建新滚动上下文
• iOS Safari 15.4 及更早必须写 position: -webkit-sticky; 在前，position: sticky; 在后；顺序错就整条失效

Grid 布局在 Safari ≤10.1 中彻底失效怎么办

Safari ≤10.1 不支持 grid-template-areas、gap（需 -webkit-grid-gap）、minmax()，且 fr 单位表现极不稳定。autoprefixer 已无法覆盖这些缺口，必须手动双写 + 降级。

立即学习“前端免费学习笔记（深入）”；

• 必须手写双版本：display: -webkit-grid; + display: grid;；-webkit-grid-gap: 12px; + grid-gap: 12px;
• grid-template-areas 在 Safari ≤10.1 完全不识别，无论加不加前缀，都会导致整条 display: grid 失效
• 用 grid-column / grid-row 显式定位子项（配合 -webkit- 前缀），它们在 Safari 10.1 中可用

真正卡住人的不是“要不要加前缀”，而是哪些属性**必须双写**、哪些**写了反而出错**、哪些**根本得换方案**——尤其当项目还要兼容 iOS 12 或 Safari 10.1 时，autoprefixer 已经不够用了。