Question

我正在将css文件转换为更少的手动，我正在尝试找到一种方法来执行浏览器特定的CSS。我尝试使用网站上提到的〜“”来逃避它，但它似乎不适用于整个代码块。

对于IE，这些工作：

padding: ~"5px\9"; /* IE8 and below */ 
*padding:4px;  /* IE7 and below */ 
_padding:2px;  /* IE6 */

对于Chrome，这有效：

/* This will apply the styling only to Chrome and Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #mySelector {
    color: red;
  }
}

然而，Firefox呢？我如何逃避：

/* This will apply the styling only to Firefox */
@-moz-document url-prefix() {
  #mySelector {
    color: red;
  }
}

Answer 1

根据其他黑客的评论和可用性，我创建了一个解决方法。

它使用WinLess.org编译器（http://winless.org/online-less-compiler）进行编译。

它不能使用DotLess编译，所以我只是改变了黑客攻击。而不是：

#mySelector {
    color: red;
}
/* This will apply the styling only to Firefox */
@-moz-document url-prefix() {
  #mySelector {
    color: green;
  }
}

我改为做了：

/* FF needs green*/
#mySelector {
   color: green;
    /*IEs need red*/
    color: ~"red\9";
}
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    #mySelector {
    /*Chrome needs red*/
       color: red;
    }
}

使用针对Firefox的lesscss和浏览器黑客

1 个答案: