Safari渲染异常主因是手动前缀、错误属性写法或Autoprefixer配置错位；Mixin硬编码前缀导致Safari跳过整条声明，Webpack中postcss-loader必须紧接less-loader后且正确启用autoprefixer插件。
Less编译本身不产生 Safari 渲染异常，真正出问题的是你手动加的前缀、错误的属性写法，或把 Autoprefixer 插件配错了位置——Safari 对 CSS 语法和堆叠上下文极其敏感，容错率远低于 Chrome。
为什么删掉 .flex-center() 这类 Less Mixin 就能修好
这类 Mixin 通常硬编码了 display: -webkit-flex、display: -ms-flexbox 等前缀规则，但 Safari（尤其是 15.4+）看到已有前缀就会跳过整条声明，导致 justify-content、align-items 等关联属性完全不生效；更糟的是，Chrome 会同时加载三条 display 声明，后两条被划掉，触发怪异渲染模式。
- Less 编译时根本不知道目标浏览器范围，Mixin 输出是“无差别广播”
- Autoprefixer 必须在 Less → CSS 之后运行，且只处理标准属性（如
display: flex），遇到已带前缀的属性直接跳过 - 像
gap、place-items、var(--x)这类属性本就不该加前缀，手写反而让 Safari 忽略整条声明
postcss-loader 必须紧接 less-loader 之后
Webpack 配置中顺序错 = Autoprefixer 彻底失效。常见错误是把 postcss-loader 放在 less-loader 前面，或漏掉 postcssOptions 层级，导致它压根没读到 browserslist 配置。
- 正确链路：
style-loader→css-loader→postcss-loader→less-loader -
postcss-loader的options必须显式启用插件：plugins: [require('autoprefixer')] - 检查输出 CSS：如果看到
display: -webkit-flex但没看到-webkit-justify-content，说明 Autoprefixer 没跑起来
Safari 对 display: grid 和 var() 的兼容性不是“加前缀就能救”
这些特性在旧版 Safari（如 15.3 及更早）中根本不存在对应实现，Autoprefixer 不会、也不能生成有效前缀。强行加 -webkit-grid 或 -webkit-var() 不仅无效，还会让 CSS 解析失败或触发降级逻辑。
-
display: grid在 Safari ≤15.3 中需降级为float或inline-block布局 -
var(--x)在 Safari ≤14 中不支持，必须用 PostCSS 插件postcss-custom-properties静态替换，或服务端注入 fallback 值 - 所有依赖
gap的布局，在 Safari 中必须补margin或用@supports (gap: 0) {}分层控制
最常被忽略的一点：Safari 的渲染异常往往不是“某条 CSS 写错了”，而是“多条 CSS 同时存在却互相干扰”——比如 Mixin 输出的前缀 + Autoprefixer 补的前缀 + 手动写的 display: -webkit-box 全挤在一起，WebKit 解析器会按顺序取第一个合法值，后面全丢弃。清理比修补更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
