less中ie hack必须用~""包裹，如margin-top: ~"10px9"，否则编译报错；~""内不支持插值，需用+拼接字符串，且空格、符号顺序必须严格匹配ie识别规则。
Less里直接写9或*display会报错，必须用~""包裹
Less编译器把9、*、+等符号当语法错误处理，不是忽略，是直接中断编译。比如margin-top: 10px9;会触发ParseError: expected ';'或静默丢弃整条声明。唯一可靠的方式是用~""告诉编译器：“别解析，原样吐出去”。
常见错误现象：
-
margin-top: 10px9;→ 编译失败 -
*display: inline;→ 警告“invalid property name”，最终CSS里没这行 -
@ie-hack: "9"; width: 100px@ie-hack;→ 输出width: 100px"9";（带引号，浏览器不认）
正确做法只有一条：所有IE Hack必须整体包裹在~""中，且不能拆开、不能插值。
示例：
div {
margin-top: ~"10px9";
*display: ~"inline";
display: ~"inline-block9; *display: inline; *zoom: 1";
}
~""内不支持@{var}插值，动态hack得靠字符串拼接
你不能在~""里写~"10px@{ie-version}"——@{ie-version}完全不展开，编译器直接当字面量处理。想让变量生效，得把变量从~""里拆出来，用+拼接。
可操作路径：
- 用
+连接：margin-top: ~"10px" + @suffix;（前提是@suffix: "9";） - 提前组装好完整字符串：
@hack-val: "10px9"; margin-top: ~"@{hack-val}"; - 避免在mixin里塞hack：
.ie-fix() { *zoom: ~"19"; }会直接报错，必须写在具体选择器下
注意：~"10px" + @suffix中，@suffix必须是纯字符串（如"9"），不能是数字9，否则拼接结果是10px9还是10pxNaN取决于Less版本。
不同IE Hack对空格和符号顺序极其敏感，~""里一个空格都不能多
IE识别Hack依赖字符紧邻关系。~"10px 9"（中间有空格）和~"10px9"效果完全不同——前者完全无效。同理，~"/9"是IE7/8 hack，但~"/ 9"就废了。
关键细节：
-
9必须紧跟在值后面，无空格、无换行 -
/结尾的hack（如width: 100px/;）同样要写成~"100px/"，不能写~"100px/ " -
+号hack必须用变量绕过：@plus: ~"+"; @{plus}display: inline;，裸写+display会报错
别指望浏览器容错——这些是IE渲染引擎的硬性匹配规则，Less只是帮你把字面量精准传过去。
大量IE Hack建议抽离为独立CSS文件，而非混在Less里
如果项目里~"xxx9"散落在十几个文件中，维护成本高，且容易漏掉~导致编译失败。更稳妥的做法是把所有Hack集中到ie-hacks.css，再用@import (css) "ie-hacks.css";引入。
这样做的好处：
- 避免Less编译器误伤——
(css)表示跳过Less解析，原样插入 - 团队协作时，Hack部分与逻辑样式物理隔离，改IE适配不用碰主样式流
- 未来删IE支持时，只需删掉一行
@import，不用全局搜索~"9"
真正难的不是写对~""，而是判断哪些hack还值得留——比如*display在IE8+已失效，9在IE10+被废弃。确认目标环境再下手，比盲目套~""重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
