Writing browser specific hack in Less (for <IE9)

问题

I want to do something like this (Source - CSS Tricks Article):

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

in Less for IE7 and IE8 but it gives errors.

The below works:

#diecinueve { color: blue\9; } 

but there are some elements that I dont want to be called in IE9. e.g. I have something in IE9 with :before elements but because IE8 doesnt support it, I want to give it a padding only in IE8.

But this

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

gives errors in Less. I tried this

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

but that also doesnt work. Does anyone know how to do this in Less?

回答1:

Are you including Modernizr or another shiv script that adds classes directly to the HTML element?

Thus something like this:

.selector {  
  ...rules...  

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

Might suit your needs. (see: nesting selectors, using the &)

Otherwise, since you're being hacky anyway, why not just reference a different .less compiled output sheet in a conditional comment?

回答2:

Property name interpolation is possible with Less v1.6.0 and above. Hence this hack can be implemented as shown below:

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

Compiled CSS:

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

回答3:

You can try this one: background-position:~"-150px 0px\9" width:~"300px\9";

example:

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

来源：https://stackoverflow.com/questions/14464530/writing-browser-specific-hack-in-less-for-ie9