根本原因是IE兼容模式强制降级渲染引擎，导致现代CSS语法被静默丢弃、前缀失效、Hack解析异常且Autoprefixer配置易断裂，必须人工降级适配。
Less编译后的CSS在IE兼容模式下表现不一致，根本原因不是Less本身出错，而是IE兼容模式（如IE8/9/10文档模式）会强制降级渲染引擎，导致它既不识别现代CSS语法，又无法正确解析部分手动添加的前缀或条件逻辑——而Less对此完全无感知、不干预、不警告。
IE兼容模式会静默丢弃整条不支持的CSS声明
IE兼容模式（比如通过触发）会让浏览器退回到旧版Trident引擎行为。此时：
-
var(--color)、gap: 1rem、display: grid等语法被直接跳过，连带影响后续属性的层叠计算 -
@keyframes里含calc()或var()？整个动画块失效，不报错也不提示 - 写了
display: -ms-flexbox; display: flex;，但IE7/8模式下-ms-前缀不被识别，两条都失效，容器塌陷 - 用
::before伪元素，IE8及以下只认:before，双冒号写法整条规则被忽略
Less里的IE Hack在兼容模式下极易编译失败或误触发
Less对IE Hack语法极其敏感，尤其在非标准文档模式下，解析器行为更不稳定：
- 裸写
width: 100px9;→ 编译报错：ParseError: Unrecognised input，错误位置常指向文件开头而非真实行 - 正确写法必须用转义：
width: 100px ~"9";或定义变量：@ie9: ~"9"; width: 100px@ie9; -
+display: inline;不能直接写，得用变量注入：@hack: ~"+"; @{hack}display: inline; -
*display是唯一可裸写的前缀，但仅限IE7，且在IE8+兼容模式中可能被当作无效语法忽略
Autoprefixer在兼容模式下完全失效，且你可能根本没配对
Autoprefixer只补前缀，不改语法，更不会适配文档模式。但它在IE兼容模式下的“失效”往往源于配置链断裂：
- postcss-loader必须紧接在
less-loader之后、css-loader之前；顺序错 = 插件没机会看到原始CSS -
postcssOptions层级漏写，只在options.plugins里填['autoprefixer']→ 配置被忽略 -
browserslist没显式包含"IE >= 9"或"IE 11"，Autoprefixer默认不生成-ms-前缀 - 已存在
display: -webkit-flex;等手写前缀 → Autoprefixer跳过整条属性，justify-content等关联属性漏补
真正该做的事：停掉幻想，显式降级
别指望Less或Autoprefixer能自动适配IE兼容模式。所有关键降级点必须人工确认并写出：
-
var(--x)→ 全部替换为Less变量：@primary: #007bff;，确保编译后输出纯值 -
gap→ 改用margin，或封装.grid-gap(@size)mixin，内部用margin-left模拟 -
display: grid→ IE10–11用display: -ms-grid+-ms-grid-columns，且不能和现代语法混写 - 媒体查询如
@media (min-width: 768px)→ IE8及以下不支持，需用JS检测或条件加载
最易被忽略的一点：IE兼容模式下，@charset "UTF-8"若不在CSS第一行（哪怕前面有个空格或BOM），浏览器就按GBK解析，中文注释和值全乱码——这会进一步干扰样式加载顺序和选择器匹配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
