Less编译不解决兼容性问题，需用Autoprefixer按browserslist自动加前缀，并对IE等不支持的特性（如var()、gap、grid）手动降级；手写前缀会导致冗余、失效甚至渲染异常。
Less编译本身不解决兼容性问题，它只做语法转换；所谓“不兼容”几乎全是因输出了旧浏览器根本不认识的 CSS（如 gap、var(--x)、display: grid）或手动加了错误前缀导致的。修复路径很明确：停掉手写前缀，交由 Autoprefixer 在编译后按 browserslist 自动补前缀，并对 IE 等明确不支持的特性做手动降级。
为什么删掉手写前缀反而能修好渲染异常
常见现象是 Chrome 里出现 display: -webkit-flex、display: -ms-flexbox、display: flex 三条并存，后两条被划掉；Safari 报 Unknown property 'gap'——这说明前缀逻辑已失控。
-
Less编译时完全不知道目标浏览器范围，.flex-center() { display: -webkit-flex; }这类 Mixin 会无差别输出，现代浏览器加载冗余规则，甚至触发怪异模式 -
Autoprefixer检测到已有前缀声明就会跳过整条属性，导致justify-content等关联属性漏补 -
gap、place-items等属性本就不该加前缀，强行添加反而让 Safari 忽略整条声明 - 真正有效的前缀生成必须发生在
Less → CSS之后，且严格按browserslist配置执行
Webpack 中 Autoprefixer 必须紧接 less-loader 之后
顺序错 = Autoprefixer 彻底失效。常见错误配置是把 postcss-loader 放在 less-loader 前面，或漏掉 postcssOptions 层级。
- 正确处理链：
style-loader→css-loader→postcss-loader→less-loader -
postcss-loader的options必须显式启用插件：options: { postcssOptions: { plugins: ['autoprefixer'] } } - 检查
package.json中的browserslist是否匹配实际需求，例如："browserslist": ["last 2 versions", "not dead", "IE >= 11"]——如果项目真要支持 IE11，这条配置缺一不可
IE 中失效的属性必须手动降级，不能依赖 Autoprefixer
Autoprefixer 只补前缀，不降级语法。IE8–IE11 不识别 var(--x)、gap、aspect-ratio，也不会把 display: grid 转成 display: -ms-grid。
立即学习“前端免费学习笔记（深入）”；
-
var(--x)全系 IE 不支持：必须用 Less 变量替代，例如@primary-color: #007bff;，编译后直接输出值 -
display: grid在 IE10–IE11 只支持旧版display: -ms-grid，且需配-ms-grid-columns等专用属性，不能靠Autoprefixer生成 -
gap在 IE 中无效：改用margin或封装为.grid-gap(@size)，内部用margin实现 - 所有降级逻辑必须显式写出，不能指望构建工具自动推导
最容易被忽略的一点：你写的每一条 var()、gap、place-items，在 IE 里不是“不生效”，而是“压根没解析”，连后备值都进不去；而 Autoprefixer 的生效前提是它得先看到合法的 CSS，所以前置的语法清理和降级动作，一个都不能少。
