less编译后css在ie中失效，主因是未过滤ie不支持的语法（如var()、grid、gap等）及ie hack书写错误（如漏~"9"或误用+display）。
Less编译后CSS在IE中失效，大概率是用了IE不认的语法
Less本身只是预处理器，它不会帮你过滤或降级CSS属性——var(--color)、display: grid、gap、aspect-ratio 这些写进Less，照样原样输出到CSS里。IE8–IE11根本看不懂，直接忽略整条声明，甚至可能连带让后续规则失效。
常见表现包括：颜色没生效、布局塌陷、元素消失、控制台无报错但样式空白。别急着查Less写法，先确认最终生成的CSS里有没有“超纲”属性。
- 用浏览器开发者工具（F12）→ Elements → 查看元素上实际应用的CSS规则，注意哪些声明被划掉（strikethrough）或灰色显示
- 重点盯：
flex相关（IE10需-ms-flexbox）、grid（IE仅支持旧版-ms-grid）、calc()在IE9+基本可用但IE8不支持、rgba()和hsla()在IE8及以下完全无效 - 检查是否误用了CSS自定义属性（
var(--x)），IE全系不支持，Less编译时不会报错也不会替换，只会原样输出
IE8–IE9下9等Hack必须用~"9"包裹，否则Less编译直接失败
Less把裸写的9当成非法转义序列，background: red9;这种写法会导致整个文件编译中断，错误提示往往不指向具体行，排查困难。
正确做法是统一用变量封装并~转义：
@ie9: ~"9";
.box {
width: 100px@ie9;
background-color: #f00@ie9;
}
-
~"9"合法，~9或"9"都不行 - 多个Hack连用（如
9）也要整体包裹：@ie9only: ~"9\0";（注意双反斜杠） - 属性名前缀（
+display、*display、_display）不能裸写，必须用@{hack}display注入，例如：@hack: ~"+"; @{hack}display: inline; -
*是唯一可裸写的Hack符号，仅限IE7属性前缀（如*display），其他位置（选择器、值内）仍会报错
客户端less.js在IE下报“SCRIPT5: 拒绝访问”，本质是file://协议跨域限制
直接双击打开HTML文件，IE会阻止less.js通过XMLHttpRequest读取本地.less文件，控制台报Access to XMLHttpRequest at 'file:///...' has been blocked by CORS policy，不是代码问题，是协议限制。
- 解决方案只有一条：**不用
file://，起本地HTTP服务**（如npx http-server、python3 -m http.server、VS Code Live Server插件） - 确保
<script></script>引入less.js的位置在所有<link rel="stylesheet/less">之后 - IE8–IE9不支持
fetch，less.js会自动回退到XMLHttpRequest，但前提是协议合法 - 如果必须离线演示，可提前用
lessc命令行编译好CSS，改用普通<link rel="stylesheet">引入
真正难缠的不是怎么加Hack，而是漏掉~或引号
一个9没被~"9"包裹，整个Less文件编译失败，项目静态资源构建中断；一个*display写成+display又忘了用@{hack}注入，IE7下样式就丢了——这类错误不会在开发时立刻暴露，常等到测试阶段才浮现。
现代项目应优先用autoprefixer处理厂商前缀，用@supports做特性检测，而非堆砌IE Hack。Less里的Hack逻辑只适合存量IE强依赖系统，且必须配合严格Code Review和CI阶段的Less语法检查（如stylelint-less）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
