autoprefixer未生效主因是构建配置覆盖或缺失，如vite中css.postcss字段覆盖默认配置、webpack漏配postcss-loader、vue单文件组件未声明lang="postcss"；targets设置不当会导致前缀遗漏或冗余，需依据真实用户数据精确指定版本；它仅添加前缀，不处理语义降级或特性模拟，vh、backdrop-filter、sticky等需额外方案；验证应以computed面板为准，避免误判。
Autoprefixer 根本没跑进你的 CSS 文件
很多项目装了 autoprefixer，但构建时压根没处理样式——Vite 5+ 默认启用，但如果你在 vite.config.js 里写了 css.postcss 字段，反而会覆盖默认配置；Webpack 则必须手动配 postcss-loader，漏一个环节就断链。Vue 单文件组件中 <style></style> 默认不走 PostCSS，得写成 <style lang="postcss"></style> 或确认 loader 链路完整。React 的 CRA 内置 PostCSS，但只处理 .css 和 .module.css，.scss 需额外配 postcss-scss。
验证方式很简单：postcss.config.js 里加一行 require('xxx-missing')，启动不报错 → 说明该文件根本没被读取。
targets 配得太宽或太旧，前缀加错版本
browserslist 写成 "last 2 versions" 看似稳妥，但 Safari 更新慢（17.5 → 18.0 跨数月），真实用户可能大量卡在 iOS 16.4，而配置却拉进了 Safari 18，结果该加的前缀没加；反过来写 "safari >= 10" 又会让 Autoprefixer 给 flex、grid 强塞大量已废弃的 -webkit-，现代 Safari 直接忽略整条声明。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 优先从真实用户统计（如 Firebase Analytics）提取最低 Safari 版本，写死为
"safari": "16.4" - 国内项目别迷信
> 1%：iOS 15.0 全球占比仍超 1%，但它对aspect-ratio支持不稳定，得显式写"ios_saf >= 16.4" - 运行
npx browserslist确认输出里真有你要覆盖的机型，比如ios_saf 16.4
Autoprefixer 明确不处理的几类问题
它只补前缀，不改语义、不降级语法、不模拟缺失特性。以下问题你手动加前缀也没用，必须另想办法：
-
vh单位在 iOS Safari 地址栏收放时被压缩 → 得用 JS 动态注入--vh: 100vh并监听resize -
backdrop-filter在 iOS 15.4+ 才稳定支持-webkit-backdrop-filter，但 caniuse 标记“需要前缀”状态不稳定 → 需在postcss.config.js中显式加overrideBrowserslist: ["ios_saf >= 15.4"] -
position: sticky在 iOS Safari 15.4 之前嵌套失效 →@supports not (position: sticky)降级为position: fixed+ 滚动监听 -
color(srgb)、transparent替换为rgba(0,0,0,0.001)这类语义修复，Autoprefixer 完全不碰
查计算样式比猜前缀更可靠
Safari 开发者工具里，选中异常元素 → Computed 面板 → 搜索关键属性名（如 display、filter、grid-template-columns），确认它们是否显示为有效值，还是被划掉（invalid）或显示为 none。很多所谓“兼容问题”，其实是属性根本没生效——比如 display: -webkit-flex 写在 display: flex 后面，Safari 17+ 直接跳过前者；又或者 transform: translateZ(0) 让 position: sticky 失效，跟前缀毫无关系。
真正麻烦的不是某一条规则写错，而是多个点叠加：一个用了 color(srgb) 的按钮，又带 backdrop-filter，还设了 border: 1px solid transparent —— Safari 会同时触发色彩映射、前缀缺失、边框语义失效三个问题，调的时候得一个个拆开验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
