26

I have been driving myself nuts trying to get comment conditionals to work and I'm not having any luck can someone explain what I'm doing wrong?

Here is my code:

        <!--[if IE 10]>
            IE IS VERSION 10<br />
        <![endif]-->
        <!--[if !IE]><!-->
            Browser is not IE
        <!--<![endif]-->
        <!--[if lt IE 9]>
            IE IS LESS THAN VERSION 9<br />
        <![endif]-->

What is happening is frustratingly inconsistant. When I load the page with the above code in IE8 it get the message "IE IS LESS THAN VERSION 9" Great right? No because when I load the SAME PAGE in IE10 I get the message "Browser is not IE"

Why does it think that IE10 is not an IE browser?! I've been crawling page after page but there doesn't seem to be any thing wrong with my code from what I've found.

2
  • 5
    The only working code is the last one in your snippet. IE10 doesn't support conditional comments, hence [if IE 10] doesn't work. Only IEs < 10 supports conditional comments, hence [if !IE] is useless. As you can see on your posted code, there's a "syntax error" in the !IE condition, hence the text Browser is not IE should be actually shown in every browser...
    – Teemu
    Oct 21, 2013 at 18:40
  • 35
    I hate Internet Explorer
    – wvdz
    Mar 6, 2015 at 15:19

5 Answers 5

24

CSS Solution:

If you want to apply only CSS base on browser then you can try:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* Put your IE-only styles here. Works for IS 10 & IE 11*/
}

JavaScript Solution:

IE 10 does not support conditional statements.

Conditional statements in Internet Explorer 10.. It will treat conditional comments as regular HTML comments, and ignored entirely.

Use a feature detection library such as Modernizr instead of browser detection.

found a solution on impressivewebs in this comment:

Here is Demo to test

The solution is:

if (Function('/*@cc_on return document.documentMode===10@*/')()) {
    alert('IE 10');
} else {
    alert('Not IE 10');
}

It

  • doesn’t need conditional comments;
  • works even if comment stripping compression/processing;
  • no ie10 class added in Internet Explorer 11;
  • more likely to work as intended with Internet Explorer 11 running in Internet Explorer 10 compatibility mode;
  • doesn’t need standalone script tag (can just be added to other JavaScript code in the head).
  • doesn't need jQuery to test
1
  • The "Cross browser best practises" link is broken.
    – Fabián
    Aug 15, 2014 at 20:59
23

I'm surprised that no one has added in a css-only solution. If you just want to use css, then use a statement like this:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* Put your IE-only styles here. Works for IS 10 & IE 11*/
}

This way you don't have to rely on jquery, or any html markup. Just post it in the css and you are good to go.

Now, is it a hack? Likely. This depends on using the microsoft high-contrast tag, but since no other browser uses the ms tag then you should be good to go.

Finally, check out these pages for more info:

Blog Post

MS Site on the contrast tag

2
  • 4
    thank you Maximus , awesome trick ......................... I HATE YOU IE
    – akokani
    Oct 15, 2017 at 19:54
  • 1
    This saved me so much time trying to hack around IE 11's idiotic implementation of Flexbox — THANK YOU.
    – aendra
    Jul 17, 2018 at 12:23
4

IE 10, 11 and upward no longer support conditional comments.

See this answer: https://stackoverflow.com/a/22187600/1498739

3

Try add the following meta tag near the top of the page to opt into Internet Explorer 9 behavior:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

This is because conditional comments has been removed in Internet Explorer 10 standards and quirks modes for improved interoperability and compliance with HTML5. This means that Conditional Comments are now treated as regular comments, just like in other browsers. This change can impact pages written exclusively for Windows Internet Explorer or pages that use browser sniffing to alter their behavior in Internet Explorer.

1
  • This has no effect as of today. Jul 7, 2019 at 3:26
0

IE 10 dropped conditional comments.

You can do something similar in javascript like this:

if ($.browser.msie && $.browser.version === 10) {
    // stuff here (like adding an IE10 class to the body or html tag
}
4
  • 3
    Yeah but that requires me to include JQUERY :(
    – TheSnooker
    Oct 21, 2013 at 18:35
  • 1
    Well, if conditionals have been dropped on IE10 you don't have too many options, do you?
    – Rafael
    Oct 21, 2013 at 18:37
  • 8
    Unfortunately, this function was removed in jQuery 1.9. Feb 17, 2014 at 19:41
  • 3
    jQuery is not a synonym for javascript. Nov 22, 2018 at 12:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.