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+被废弃。确认目标环境再下手,比盲目套~""重要得多。


















