Less中使用转义字符实现IE兼容CSS Hack

在Less中实现IE兼容的CSS Hack并非简单复制粘贴，而是必须精准处理语法冲突：`\9`、`\0`等值后缀需用`~"\9"`转义，`+`、`*`、`_`等属性前缀须通过`@{hack}`变量注入，唯独`*`作为IE7前缀可裸写；条件注释则完全无法在Less中生效，必须交由HTML层配合加载独立CSS文件——这些细节稍有疏忽（如漏掉引号或`~`）就会导致编译中断，而现代开发更应转向PostCSS autoprefixer或CSS特性查询等健壮方案。

Less中直接写\9会报错，必须用~转义

Less编译器把\9当作非法转义序列处理，不加保护就写background: red\9;会直接中断编译。核心解法是用~前缀+引号包裹，告诉Less“别解析，原样输出”。

• @hack: ~"\9"; 是最常用写法，定义后可在任意属性值末尾拼接：width: 100px@hack;
• 注意引号必须存在，~"\9"合法，~\9非法
• 多个hack连用（如\9\0）也得整体包裹：@hack: ~"\9\\0";（第二个反斜杠用于转义第一个）
• IE8专用的\0同理，不能裸写，必须走~"\0"路径

用@{hack}变量注入属性名前缀（比如+display）

+、*、_这些符号在Less里有语法含义（加法、乘法、变量引用），直接写+display: inline;会被当成运算或语法错误。必须把前缀抽成字符串变量，再用@{...}插槽注入。

• 写法：@hack: ~"+"; .box { @{hack}display: inline; } → 编译为.box { +display: inline; }
• @hack: ~"*";和@hack: ~"_";同理，分别对应IE7和IE6的属性前缀
• 不能省略花括号：@{hack}display合法，@hack display会报错
• 这种写法只适用于属性名前缀，不适用于选择器（如* html .box需另寻他法）

IE条件注释无法在Less里生效，得靠HTML层配合

Less编译产出纯CSS，而是HTML级条件注释，Less压根不处理它。想用条件注释，必须把样式剥离到独立CSS文件，再通过HTML条件注释加载。

• 错误做法：在Less文件里写// → 编译后变成注释，无效
• 正确路径：生成ie-fixes.css，然后在HTML中：
• 如果非要在Less里模拟，只能用@media或:root hack（如:root .box { background: red\9; }），但这类写法兼容范围有限，且\9仍需~包裹

*号是唯一可裸写的IE Hack符号

Less对*的特殊宽容，让它成为少数不用~也能存活的Hack字符——仅限于作为属性前缀（如*display），且仅对IE7有效。

• 可直接写：.box { display: inline-block; *display: inline; *zoom: 1; } → 编译结果完全一致
• 但*不能用于其他位置：写* html .box（选择器）会报错，background: *red;（值内）也不行
• +、_、#等一律不支持裸写，强行使用必然触发Less语法错误
• 现代项目应优先考虑PostCSS autoprefixer或feature queries，而非依赖这类脆弱Hack

真正麻烦的不是怎么写，而是维护时容易漏掉~或引号；一旦某个\9没被包裹，整个Less文件编译失败，错误提示还不一定指向那行。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。