现代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 被忽略导致内容撑破容器。这不是代码写错了，是引擎缺陷。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 对
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。
- 逐级检查 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 中可用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
