Less不处理浏览器兼容性，仅做语法转换，编译后原样输出CSS，因此gap、grid、var()等IE不支持的属性会失效；需配合Autoprefixer、browserslist及手动降级兜底。
Less 本身不处理浏览器兼容性，它只做变量、嵌套、Mixin 等语法转换，编译后原样输出 CSS —— 所以你在 Less 里写的 gap、display: grid、var(--color)，IE11 或 Chrome 30 都会直接报错或静默忽略。
Less 编译不降级，也不过滤 IE 不支持的语法
常见错误现象：页面在 IE11 中布局塌陷、颜色丢失、控制台无报错但样式失效；用开发者工具看 Elements 面板，会发现 gap、place-items、aspect-ratio 这些声明被划掉（strikethrough），说明浏览器根本没认。
-
var(--x)在 IE 全系中不被识别，连语法解析都失败，var(--x, #fff)后备值也无效 -
display: grid在 IE10–IE11 只支持旧版display: -ms-grid，且需搭配-ms-grid-columns等专用属性 -
flex相关属性在 IE10 需加-ms-前缀，IE9 及以下则完全不支持，得回退到float或inline-block -
calc()在 IE9+ 可用，但 IE8 不支持；rgba()和hsla()在 IE8 及以下无效
手写前缀或 Mixin 是陷阱，不是解法
常见错误现象：Chrome 102 里出现三条 display 声明（-webkit-flex、-ms-flexbox、flex），其中两条被标记为无效；Safari 16.4 报 Unknown property 'gap' —— 因为手动加了 -webkit-gap。
- Less 编译阶段不知道目标浏览器范围，
.flex-center() { display: -webkit-flex; }这类 Mixin 会无差别注入，导致现代浏览器加载冗余甚至冲突规则 - Autoprefixer 才是唯一可靠的前缀生成器，但它必须在 Less 编译之后运行，顺序错了就完全失效
- Webpack 中错误配置
postcss-loader在less-loader之前，或漏掉postcssOptions.plugins，都会让 Autoprefixer 彻底不工作 -
browserslist配置不匹配实际需求（比如写了"IE >= 11"却没生效），Autoprefixer 就不会补-ms-前缀
& 嵌套、BEM 写法在老编译器里直接报错
常见错误现象：ParseError: Unrecognised input 指向 &__item 行；Vue 项目里 &:hover 生效，但 @media 内部 & 报错；三层嵌套时第三层 & 被忽略。
立即学习“前端免费学习笔记（深入）”；
-
lessc版本低于3.13.1对&支持不完整；less-loader@11必须配less@4，否则&在@media或 Mixin 中静默失效 -
&必须紧贴选择器，中间不能有空格：&--primary✅，& --primary❌；&:hover✅，& :hover❌（伪类前多空格） -
@media内部不能孤立用&：@media (max-width: 768px) { & { color: red; } }非法；必须先有外层选择器再进媒体查询 - IE8–IE9 的 Hack 写法必须用
~"9"，裸写9或"9"会导致 Less 编译中断，错误提示常不精准
客户端 less.js 在 IE 下根本跑不起来
常见错误现象：双击打开 HTML 文件，IE 控制台报 SCRIPT5: 拒绝访问 或 Access to XMLHttpRequest at 'file:///' has been blocked，但代码本身没问题。
- 这是
file://协议触发的跨域限制，IE 严格阻止less.js通过XMLHttpRequest读取本地.less文件 - 唯一有效方案是起本地 HTTP 服务：
npx http-server、python3 -m http.server或 VS Code Live Server 插件 - 如果必须离线演示，提前用命令行
lessc编译好 CSS，改用<link rel="stylesheet">引入静态文件，别依赖运行时编译 -
<script>引入less.js必须放在所有<link rel="stylesheet/less">之后，否则加载顺序错乱
真正麻烦的不是语法写错，而是误以为 Less 自带兼容性保障 —— 它只负责“翻译”，不负责“适配”。从变量、嵌套到输出结果，每一步都得靠构建链路（PostCSS + Autoprefixer + browserslist）和人工兜底（@supports、静态值前置、IE Hack 封装）来补位。漏掉任一环，旧浏览器就只剩白屏或错位。
