在 Less 中编写特定于浏览器的 hack（适用于 <IE9）答案

【问题标题】：Writing browser specific hack in Less (for <IE9)在 Less 中编写特定于浏览器的 hack（适用于 <IE9）
【发布时间】：2018-10-26 17:36:24
【问题描述】：

我想做这样的事情（来源 - CSS Tricks Article）：

#veinte { color/*\**/: blue\9; }

在 IE7 和 IE8 的 Less 中，但它给出了错误。

以下工作：

#diecinueve { color: blue\9; }

但是有些元素我不想在 IE9 中被调用。例如我在 IE9 中有一些带有 :before 元素的东西，但是因为 IE8 不支持它，所以我只想在 IE8 中给它一个 padding。

但是这个

#veinte { color/*\**/: blue\9; }

在 Less 中给出错误。我试过这个

#veinte { color~"/*\**/": blue\9; }

但这也行不通。有谁知道如何在 Less 中做到这一点？

【问题讨论】：

【解决方案1】：

Property name interpolation 可以使用 Less v1.6.0 及更高版本。因此，这个 hack 可以实现如下所示：

@hack: ~"/*\**/";
#veinte { 
    color@{hack}: blue\9; 
}

编译后的 CSS：

#veinte {
    color/*\**/: blue\9;
}

【讨论】：

【解决方案2】：

您是否包含Modernizr 或另一个直接将类添加到HTML 元素的shiv 脚本？

因此是这样的：

.selector {  
  ...rules...  

  .lte8 & {  
    ... < IE9 styles ...  
  }  
}

可能适合您的需求。（见：nesting selectors、using the &）

否则，既然你是 hacky，为什么不在 conditional comment 中引用不同的 .less 编译输出表？

【讨论】：

【解决方案3】：

你可以试试这个：background-position:~"-150px 0px\9" width:~"300px\9";

示例：

.test{
    width:~"300px\9";
}

【讨论】：