less本身不处理浏览器兼容性，真正需修正的是构建链路（postcss-loader必须紧接less-loader之后）、browserslist配置（需明确包含ie 11）、以及避免手动前缀干扰autoprefixer，同时对ie11不支持的语法（如var()、gap、grid）须手写降级或用@supports分流。
Less 本身不处理浏览器兼容性，所有“兼容性问题”都来自开发者误用或构建链路错配。真正要改的不是 Less 写法，而是编译流程和降级策略。
为什么手动加 -ms- 前缀反而让 IE11 崩溃
常见现象：display: -ms-flexbox 和 display: flex 同时存在，IE11 渲染错乱；gap 声明被划掉，子元素紧贴无间距。
- IE11 不识别
gap，加-ms-gap是非法属性，整条声明被静默丢弃 -
display: -ms-flexbox会干扰 Autoprefixer 对justify-content等关联属性的补全逻辑 - Less 编译阶段无法感知目标浏览器，
.flex() { display: -ms-flexbox; }会无差别输出，现代浏览器白加载冗余规则
哪些语法 IE11 根本不认，必须手动降级
Autoprefixer 只补前缀，不改语法结构。IE11 静默丢弃整条声明，不会 fallback，也不会报错。
-
var(--color)：全系 IE 不支持，连后备值var(--color, #000)都无效 → 改用 Less 变量：@primary-color: #007bff; -
display: grid：IE10–11 只支持display: -ms-grid，且必须配-ms-grid-columns和-ms-grid-rows→ 不能靠 Autoprefixer，得手写两套或用@supports分流 -
calc()：IE10+ 支持，但 Less 默认尝试计算 → 必须转义：width: ~"calc(100% - 20px)";，否则输出静态值（如80%） -
gap、place-items：IE 中无对应前缀 → 改用margin或封装.grid-gap(@size)，内部用margin-right+margin-bottom
postcss-loader 配置错在哪，导致 -ms- 前缀根本不出现在最终 CSS 里
装了 autoprefixer 却没 -ms- 前缀，90% 是构建链路断了。
-
postcss-loader必须紧跟less-loader之后，顺序错 = 彻底失效。正确链路：style-loader→css-loader→postcss-loader→less-loader -
postcss-loader的options必须显式嵌套postcssOptions，只写plugins: ['autoprefixer']无效 - 检查
browserslist配置是否包含IE 11，例如："IE 11", "last 2 Chrome versions"
如何封装真正可控的布局 Mixin（比如 .flex-center()）
别用黑盒 .vendor-prefix() 类型的通用 Mixin —— 它掩盖真实兼容性，还容易在 Chrome 100+ 里多出三条无效声明。
- 用带开关参数的写法：
.flex-center(@legacy: true)，@legacy: false时只输出标准语法 - 老 IE 补丁单独抽成
.flex-legacy()，并注释清楚仅用于target: "IE 11" - 对
clip-path这类支持度碎的属性，用@supports (clip-path: polygon(0 0))包裹标准写法，前缀版本放外面作降级 - 禁用硬编码版本号，改用变量如
@ie11-support: true，统一在配置文件里开关
最容易被忽略的是：Less 层面的任何“兼容性封装”，都只是临时补丁；真正的控制权在构建链路和 @supports 检测逻辑里。一旦 Mixin 封装成黑盒，团队成员就会无意识信任它，而忘记查 caniuse.com 上 place-items 在 Safari 14.1 才支持、-webkit- 补丁早已移除的事实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
