-2

I have certain styling specific to my application when the user opens the application in IE browser. These styling are only meant for IE (no version requirement for me) and should not be applied when user opens the web application in other browsers like chrome and firefox. I want to apply the styling through my css class. Have tried multiple suggestion but did not seems to help.

Please provide your inputs on the same.

Sam
  • 728
  • 1
  • 9
  • 26
  • Possible duplicate of [Apply style ONLY on IE](https://stackoverflow.com/questions/11173106/apply-style-only-on-ie) – disinfor Feb 12 '18 at 05:57

2 Answers2

0

IE6 Only

_selector {...}

IE6 & IE7

*html or { _property: }

IE7 Only

*+html or { *property: } - Keep in mind that you have to put the IE7 property first within the same selector.

IE8

.selector/*\**/ { color:#f00; }

NOTE: LESS v1.5.0 shoots out an error when compiling the CSS if you use this hack :/

IE8 and IE9

.selector { color:#f00\9; }

The above solution doesn't work with font-family, so instead you need to use "\0/ !important" Example: { font-family:Arial \0/ !important; }

Also, using "\9" is picked up by IE10 and IE11 so you need to redeclare the CSS rules with "-ms-high-contrast:".

IE9 Only

:root .class/#id { property:value \0/IE9; }

IE10 and IE11

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .selector { property:value; }
}
Yasir
  • 687
  • 1
  • 6
  • 11
0

You will need to read the conditional stylesheet here..

Write all of your IE specific css in a separate file and define it in <head> like:

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Bhuwan
  • 16,525
  • 5
  • 34
  • 57