根本原因是less不做过滤降级，将ie11不支持的var()、gap、grid等语法原样输出，导致整条声明被静默丢弃；同时autoprefixer配置错误、文档模式非ie11标准也会加剧失效。
Less生成的CSS在IE11中渲染异常，根本原因不是Less本身有问题，而是它照单全收你写的现代语法，不加过滤、不降级、不报错——var(--c)、gap、display: grid、animation: fade 0.3s这些全被原样输出，IE11看不懂就直接丢弃整条声明，连带破坏后续样式链。
IE11不认的CSS语法会静默失效，不是变灰，是彻底消失
开发者工具里看到声明被划掉（strikethrough），不代表“只是没生效”，而是IE11压根没解析它。常见失效点：
-
var(--color)：IE全系不支持，整条color: var(--color)被跳过，不会 fallback 到继承值，而是取属性初始值（比如color变成黑色） -
gap：Flex容器中写gap: 1rem，IE11完全无视，且不补-ms-gap（这属性根本不存在） -
display: grid：和-ms-grid是两套互斥系统，混写或只写现代语法，布局直接塌陷 -
animation: slide 0.2s：IE11只认拆解后的单值属性，如-ms-animation-name: slide，复合写法常被忽略 -
@keyframes里含calc()或var()：整个@keyframes块被浏览器跳过，动画不触发
Less里的IE Hack写法极易出错，编译失败都不报具体行号
Less对IE Hack的语法极其敏感，裸写9或+display会导致编译中断，但错误提示常指向文件开头而非真实出错行。
-
background: red9;→ 编译失败：ParseError: Unrecognised input（9被当作非法转义） - 正确写法必须用
~"9"包裹：width: 100px@ie9;，其中@ie9: ~"9"; -
+display不能裸写，得用变量注入：@hack: ~"+"; @{hack}display: inline; -
*display是唯一可裸写的前缀，仅限IE7属性，用在选择器或值里仍会报错
Autoprefixer没生效，不是插件没装，是配置链断了
很多人装了autoprefixer却依然没-ms-前缀，问题出在构建流程里：
-
postcss-loader必须放在less-loader之后、css-loader之前，顺序错=前缀白加 -
postcss.config.js里plugins必须嵌套在postcssOptions下，只写['autoprefixer']无效 -
browserslist必须显式写"IE 11"，"not dead"或"IE >= 11"都不被识别 - Tailwind或Less输出的CSS必须先经过
autoprefixer，否则它扫描不到原始属性，无法补前缀
本地开发时less.js在IE11报SCRIPT5，和代码无关，是协议限制
双击打开HTML文件，IE11拒绝执行less.js加载.less文件，报错Access to XMLHttpRequest at 'file:///' has been blocked。
- 这不是跨域配置问题，是
file://协议本身被IE禁止XMLHttpRequest读取本地资源 - 唯一可靠解法：起HTTP服务，例如
npx http-server或VS CodeLive Server插件 - 离线演示必须提前用
lessc编译好CSS，改用<link rel="stylesheet">引入静态CSS
最常被忽略的一点：IE11的文档模式和兼容性视图设置会覆盖所有CSS努力——哪怕你前缀全、变量降级稳、Hack写得准，只要文档模式设成IE7标准，Flex/Grid/Animation照样全部失效。务必在F12开发者工具里确认文档模式是IE11标准，并从兼容性视图列表中移除当前域名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
