Safari 9–13.1 必须写 display: -webkit-flex; 在前、display: flex; 在后，否则 Flex 布局失效；Safari 14+ 完全忽略 -webkit-flex；-webkit-box-sizing 从未被实现，纯冗余；真正需前缀的仅限 -webkit-line-clamp 等无标准替代属性。
加 -webkit- 前缀不能“修复”Safari 的盒模型或 Flex 渲染问题，除非你明确在支持旧版 Safari（iOS 13.3 / Safari 13.1 及更早）——而现代 Safari（14+）不仅不认这些前缀，还会静默丢弃它们。
display: -webkit-flex 在哪些 Safari 版本里必须写
只在 Safari 9–13.1（对应 iOS 9–13.3）中，display: flex 完全无效，必须配 display: -webkit-flex 才能启动 Flex 布局引擎。这不是“兼容增强”，是硬性门槛。
- 写法必须是：
display: -webkit-flex;在前，display: flex;在后；顺序反了，旧 Safari 直接忽略整条规则 -
-webkit-flex-direction、-webkit-justify-content、-webkit-align-items等容器级属性也必须一一对应补全，缺一个，布局就崩 - Safari 14+ 已彻底移除对
-webkit-flex的支持，此时再写它，CSS 解析器会直接跳过该声明（开发者工具里看不到、也不报错）
box-sizing: border-box 加 -webkit-box-sizing 为什么没用
-webkit-box-sizing 从未被任何 Safari 版本实现过。Safari 自 iOS 6 / OS X 10.9（2012 年底）起就原生支持无前缀 box-sizing，2013 年起所有版本均静默忽略 -webkit-box-sizing 声明。
- 你在样式里写了
-webkit-box-sizing: border-box，开发者工具里根本不会显示它生效 - 如果同时写了
box-sizing: border-box和-webkit-box-sizing: border-box，后者会被丢弃，前者照常工作 - 全局重置里写
* { -webkit-box-sizing: border-box; }是典型过时写法，纯属冗余甚至干扰解析
真正需要 -webkit- 前缀的 CSS 属性有哪些
不是所有“看起来像 WebKit 特性”的属性都需要前缀。只有那些至今仍无标准替代、或 Safari 实现明显滞后的属性才需手动加 -webkit-。
-
-webkit-line-clamp：多行文本截断，2026 年仍无标准等效属性，必须带前缀 -
-webkit-backdrop-filter：Safari 9+ 支持，Chrome/Firefox 到 2024 年才陆续跟进，必须显式写前缀 -
-webkit-appearance: none：清除或默认样式，Safari 15.6+ 才稳定支持标准appearance: none -
[&::-webkit-scrollbar]:hidden：Tailwind 中隐藏滚动条的唯一可靠写法，scrollbar-width在 Safari 中无效
Autoprefixer 为什么没给你加对前缀
Autoprefixer 不是“自动猜前缀”，它严格按 browserslist 配置 + caniuse 数据库生成。默认配置（如 "last 2 versions"）几乎不会触发 Safari 旧版前缀输出，因为当前最新是 Safari 18，它不会回溯到 Safari 12。
- 要让 Autoprefixer 输出
-webkit-flex，必须明确配置ios_saf >= 11.3或safari >= 10（注意小数点不能省） - 查真实用户数据，比如 Firebase 显示最低占比设备是 iOS 14.5，则应设
ios_saf >= 14.5，而非盲目写>= 12 - 用
npx browserslist验证配置是否真命中 Safari 旧版本，否则你写的前缀永远不会出现
最易被忽略的一点：Safari 渲染异常十有八九不在前缀本身，而在 filter 与 transform 组合引发的图层截断、flex: 1 下缺失 min-width: 0、或 position: sticky 嵌套失效——这些问题加再多 -webkit- 也没用，得换思路查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
