IE conditional CSS is coming in FF & Chrome

Question

I am using simple method to target IE only CSS.

   <!--[if !IE]><!-->
       <body>
    <!--<![endif]-->
    <!--[if IE]>
       <body class="ie">
    <![endif]-->


<div class="Out">My test content
</div>

External CSS

.Out{
 width:300px;/*Not for IE*/
}
ie. Out{
 width:300px; /*only for IE*/
}

But In FF & chrome developer tool I am seeing body get class="ie" which is wrong.class="ie" is only for IE browsers.

There are number article I have referred

Reference:

https://css-tricks.com/snippets/html/add-body-class-just-for-ie/

https://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Detecting IE11 using CSS Capability/Feature Detection enter link description here

http://www.positioniseverything.net/articles/cc-plus.html .....etc list goes on

I have referred numbers of article but not helping.I think I am missing some things.

score 0 · Answer 1 · edited May 23 '17 at 10:33

I have tried lots of thing from various source and article as I mentioned in my question.

Fortunately what work for me is answer from "SW4" in how-to-write-a-css-hack-for-ie-11

IE 8,9 and 10

.Out {
       width:400px\0; /*For IE 8,9 and 10.*/
       /* For me above code is also supporting in IE 11 also. However, for IE 10+ browser I have added media query using -ms-high-contrast below*/

      width: 300px;   /*for other Browsers*/
         }

Here’s the technique, which is really rather simple: create a media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+), it will only be parsed in Internet Explorer 10 and greater.

-ms-high-contrast supports two values: none and active. So to target IE10+ regardless of the property’s setting, use this media query:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
width:400px; /* IE10+ CSS styles go here */
}

IE conditional CSS is coming in FF & Chrome

1 Answers1