加 -webkit- 前缀对 box-sizing 等盒模型属性完全无效；Safari 自 iOS 6 / OS X 10.9 起原生支持标准 box-sizing，2013 年起已移除 -webkit-box-sizing 支持，现所有版本均静默忽略该声明。
直接说结论：加 -webkit- 前缀对盒模型本身（box-sizing、display、flex 等）完全无效，Safari 从 iOS 6 / OS X 10.9 起就已原生支持 box-sizing: border-box，盲目加前缀不仅没用，还可能干扰 CSS 解析或触发旧版兼容逻辑。
为什么你搜到的“加 -webkit-box-sizing”全是误导
早期（2012 年前后）WebKit 内核确实需要 -webkit-box-sizing，但 Safari 在 2013 年就移除了该前缀支持，并将标准属性设为唯一有效入口。现在所有 Safari 版本（含 iOS 15–17、macOS Ventura–Sequoia）遇到 -webkit-box-sizing 都会静默忽略——它不是被“兼容”，而是被当作文法错误跳过。
常见错误现象：-webkit-box-sizing: border-box 写在样式里，开发者工具中看不到该声明生效；同一样式块中若同时写了 box-sizing: border-box 和 -webkit-box-sizing: border-box，后者会被丢弃，但前者仍正常工作。
- 别再复制粘贴过时的重置代码（如
* { -webkit-box-sizing: border-box; }） - 不要用 Autoprefixer 或旧版 PostCSS 插件生成
-webkit-box-sizing，它早已不在目标浏览器列表中 - 检查构建配置，确认未启用针对 Safari
真正需要 -webkit- 前缀的盒模型相关场景
前缀只在极少数与盒模型**间接相关**、且尚未稳定标准化的渲染控制属性上仍有意义，例如：
-
-webkit-appearance: none：用于清除表单控件默认样式（如<input type="number">的上下箭头），Safari 15.6+ 才稳定支持标准appearance: none，此前必须配前缀 -
-webkit-line-clamp：多行文本截断，至今无标准等效属性，必须带前缀才能生效 -
-webkit-overflow-scrolling: touch：iOS 15.4 之前用于启用平滑滚动，现已废弃，但老项目若未清理仍可能残留
注意：这些都不是盒模型核心属性（width、padding、border、box-sizing），加前缀是为它们自身，而非为“修复盒模型”。
盒模型在 Safari 中出问题，真正该查什么
如果你看到 Safari 下元素尺寸错乱、父容器高度塌陷、flex 子项不占满，问题几乎肯定不在前缀，而在以下更实际的点：
- 是否漏写了
*, *::before, *::after { box-sizing: border-box; }全局重置？这是最常见疏漏 - 是否在 flex 容器上误用了
float或position: absolute，导致 Safari 的 flex layout 计算异常（Chrome 更宽容） - 是否用了
contain: paint但未降级检测 —— Safari 16.6 对该值仍有误报，建议改用@supports (contain: layout) - 是否在
transform元素内部嵌套了需要精确尺寸计算的布局（如grid），Safari 对 transform 后的 layout 测量更保守
最后提醒一个容易被忽略的细节
Safari 对 box-sizing 的解析严格遵循规范：它**不支持**在伪元素（如 ::before）上单独设置 box-sizing 来影响其 content 尺寸——该属性只对生成盒（generated box）起作用，而伪元素的盒尺寸由其内容和 display 类型决定。试图靠 ::before { box-sizing: border-box; width: 100%; padding: 10px; } 拉伸伪元素宽高，在 Safari 中大概率失效。这种写法本身就不符合规范，只是其他浏览器做了容错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
