css - Internet Explorer css hack 负数和少编译

Question

我有一个 LESS 文件，我在其中应用了 IE8 css 特定的 hack，例如:

#example {
   height: 46px; //ALL BROWSERS
   height: 50px\9; //ONLY IE8
}

当从 LESS 编译成 CSS 时，上面的例子是有效的，使用负数会引发编译错误。

#example {
   height: 46px; //ALL BROWSERS
   height: -50px\9; //ONLY IE8 BUT GIVES A COMPILATION ERROR WITH LESS
}

我尝试了不同的解决方案，但都没有奏效，只能手动修改 css 编译文件。

Answer 1

根据 CSS Spec反斜杠 (\) 字符表示字符转义。例如，值为 \A content 属性将指示换行符。所以从技术上讲，50px\9 是符合 CSS 规范的有效语法。

但是，当在此之前添加否定运算符时，解析会失败，因为 50px\9 不会被解释为数字，而是被视为匿名类型。

因此，我们必须使用字符串操作和转义来形成输出值。将属性的整个值放在引号内(包括 \9)，然后使用 ~ 或 e() 函数将使 Less将该值视为字符串，然后不带引号输出。

#example {
    height: 46px;
    height: ~"-50px\9";
}

或

#example {
    height: 46px;
    height: e("-50px\9");
}

编译后的 CSS:

#example {
    height: 46px;
    height: -50px\9;
}

引用资料:

• Comment by seven-phases-max
• Less GitHub Issue #2207
• Less GitHub Issue #1961