– n00shie Aug 06 '13 at 22:46

Question

Browsers other than Internet Explorer treat the conditional statements as comments because they're enclosed inside comment tags.

<!--[if IE]>
Non-Internet Explorer browsers ignore this
<![endif]-->

However, when you're targeting a browser that is Internet Explorer not Internet Explorer, you have to use two comments, one before and one after the code. Internet Explorer will ignore the code between them, whereas other browsers will treat it as normal code. The syntax for targeting non-Internet Explorer browsers is therefore:

<!--[if !IE]-->
Internet Explorer ignores this
<!--[endif]-->

Note: These conditional comments are no longer supported from Internet Explorer 10 onwards.

score 72 · Answer 1 · edited Jan 29 '22 at 20:49

72

Browsers other than Internet Explorer treat the conditional statements as comments because they're enclosed inside comment tags.

<!--[if IE]>
Non-Internet Explorer browsers ignore this
<![endif]-->

However, when you're targeting a browser that is Internet Explorer not Internet Explorer, you have to use two comments, one before and one after the code. Internet Explorer will ignore the code between them, whereas other browsers will treat it as normal code. The syntax for targeting non-Internet Explorer browsers is therefore:

<!--[if !IE]-->
Internet Explorer ignores this
<!--[endif]-->

Note: These conditional comments are no longer supported from Internet Explorer 10 onwards.

edited Jan 29 '22 at 20:49

Peter Mortensen

30,738
21
105
131

answered Jan 05 '13 at 15:45

user1324409

879
5
3

1

That's great. Thanks for that. The stylesheet works however the problem I have now is that at the top of the page above the header this appears in ie (the tag went in the header area not body) – user1516788 Jan 07 '13 at 00:39
22

-1: This answer is *incorrect* because `IE ignores this` is **not** hidden from IE! (7, 8, or 9) – JohnB Jun 04 '13 at 00:39
3

None of the answers worked for me, perhaps something changed in the recent release of IE10 (tried in IE9 mode too). - All attempts ended up reaching the !IE section on all browsers (IE and not IE). – Danny Varod Jun 06 '13 at 21:17
2

IE10 does not support conditional statements. – Scorpius Sep 12 '13 at 19:23
1

Be aware of whitespaces in - there shouldn't be any whitespaces (e.g. between !-- and [. It doesn't work with whitespaces. – Robert Skarżycki Nov 29 '13 at 10:57
The negative statement (the second one in the answer) is wrong and needs to look like this to hide from IE<=9: ` IE ignores this `. This is an alternative syntax to: ` IE ignores this `. – Oliver Jan 28 '15 at 20:20
Well, that was annoying... Thank you for the clarification – Josh Bodah Apr 13 '15 at 17:00
I spoke too soon, I had to do `...` for IE and `...` for FF, Chrome, etc – Josh Bodah Apr 13 '15 at 17:41

score 40 · Answer 2 · edited Jan 28 '22 at 09:59

Reasons for why the Internet Explorer targeting doesn’t work: Internet Explorer 10 and onward no longer support conditional comments. From the Microsoft official website:

Support for conditional comments has been removed in Internet Explorer 10 standards and quirks modes for improved interoperability and compliance with HTML5.

Please see here for more details: Conditional comments are no longer supported.

If you desperately need to target Internet Explorer, you can use this jQuery code to add an ie class to and then use the .ie class in your CSS to target Internet Explorer browsers.

if ($.browser.msie) {
    $("html").addClass("ie");
}

$.browser is not available after jQuery 1.9. If you upgrade to jQuery above 1.9 or you already use it, you can include the jQuery migration script after jQuery so that it adds missing parts: jQuery Migrate Plugin

Alternatively, please check this question for possible workarounds: browser.msie error after update to jQuery 1.9.1

that's a real nice solution! I don't even need to use it on the dom tree to apply certain classes. — mjs, Aug 28 '15 at 18:25
Please note, this is deprecated since jQuery 1.3 and removed in 1.9 — Jøran, Dec 07 '15 at 14:59

score 13 · Answer 3 · answered Aug 14 '13 at 22:10

13

The Microsoft-recommended syntax for downlevel-revealed conditional “comments” is this:

<![if !IE]>
<link type="text/css" rel="stylesheet" href="/stylesheets/no-ie.css" />
<![endif]>

These aren’t comments, but they work properly.

answered Aug 14 '13 at 22:10

1

Found this link that supports this answer, also has lots of other info that could help the thread, I think this is an important subject...only difference I see is if a hidden or revealed syntax is used and I am not sure how this will effect other browsers... http://msdn.microsoft.com/en-us/library/ms537512.ASPX – user1360809 Dec 18 '13 at 10:57
3

Note: These conditional comments are [no longer supported from IE 10 onwards](https://msdn.microsoft.com/library/hh801214(v=vs.85).aspx) – Flimm Sep 06 '17 at 09:02

score 11 · Answer 4 · edited Jan 28 '22 at 10:00

11

I use this and it works:

<!--[if !IE]><!--> if it is not IE <!--<![endif]-->

edited Jan 28 '22 at 10:00

Peter Mortensen

30,738
21
105
131

answered Jul 07 '13 at 11:41

Francis

127
1
2

This results in Firefox just treating the entire contents as a comment for me. @Charmander solution worked for both IE and Firefox - <![if !IE]><![endif]> – Tom Chamberlain Mar 20 '15 at 09:45
4

Note: These conditional comments are [no longer supported from IE 10 onwards](https://msdn.microsoft.com/library/hh801214(v=vs.85).aspx) – Flimm Sep 06 '17 at 09:01

score 8 · Answer 5 · edited Jan 28 '22 at 10:11

8

First of all, the right syntax is:

<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="/stylesheets/ie6.css" />
<![endif]-->

Try these posts:

Another thing you can do:

Check the browser with jQuery:

if($.browser.msie) { // Do something... }

In this case you can change CSS rules for some elements or add a new CSS link reference:

Read this: Applying stylesheets dynamically with jQuery

edited Jan 28 '22 at 10:11

Peter Mortensen

30,738
21
105
131

answered Dec 09 '12 at 08:39

BorisD

2,231
5
25
35

See user1324409's answer above for a more accurate answer. – Chris Peters Jan 05 '13 at 15:50
2

Due to the jQuery updates, anybody who uses $.browser.msie, will have to include jquery-migrate.js and then this will work. – AspiringCanadian Dec 17 '13 at 08:17
1

Note: These conditional comments are [no longer supported from IE 10 onwards](https://msdn.microsoft.com/library/hh801214(v=vs.85).aspx) – Flimm Sep 06 '17 at 09:02
The link provided in the answer is dead. – Pankaj Dec 04 '19 at 19:34

score 8 · Answer 6 · edited Jan 29 '22 at 20:53

8

You need to add a space for the . My full CSS block goes as follows, since IE8 is terrible with media queries.

<!-- IE 8 or below -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css"  href="/Resources/css/master1300.css" />
<![endif]-->
<!-- IE 9 or above -->
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" media="(max-width: 100000px) and (min-width:481px)"
    href="/Resources/css/master1300.css" />
<link rel="stylesheet" type="text/css" media="(max-width: 480px)"
    href="/Resources/css/master480.css" />
<![endif]-->
<!-- Not IE -->
<!-- [if !IE] -->
<link rel="stylesheet" type="text/css" media="(max-width: 100000px) and (min-width:481px)"
    href="/Resources/css/master1300.css" />
<link rel="stylesheet" type="text/css" media="(max-width: 480px)"
    href="/Resources/css/master480.css" />
<!-- [endif] -->

edited Jan 29 '22 at 20:53

Peter Mortensen

30,738
21
105
131

answered Jan 08 '13 at 19:18

John Hayford

89
1

Thanks for your comment but if I use then other browsers apply this too. – user1516788 Jan 08 '13 at 23:47
3

Isn't that the point, to have other browsers apply that section? – John Hayford Jan 09 '13 at 16:06
2

-1: The `!IE` technique mentioned here will actually execute the commented block for IE 7 through 10. – Ian Campbell Aug 04 '13 at 22:53
1

Note: These conditional comments are [no longer supported from IE 10 onwards](https://msdn.microsoft.com/library/hh801214(v=vs.85).aspx) – Flimm Sep 06 '17 at 09:02

score 8 · Answer 7 · edited Jan 28 '22 at 10:05

For targeting Internet Explorer users:

<!--[if IE]>
Place content here for users of Internet Explorer.
<![endif]-->

For targeting all others:

<![if !IE]>
Place content here for Users of all other browsers.
<![endif]>

The conditional comments can only be detected by Internet Explorer. All other browsers treat it as normal comments.

To target Internet Explorer 6, Internet Explorer 7, etc. You have to use "greater than equal" or "lesser than (equal)" in the if Statement. Like this:

Greater than or equal:

<!--[if gte IE 7]>
Place content here for users of Internet Explorer 7 or above.
<![endif]-->

Lesser than:

<!--[if lt IE 6]>
Place content here for users of Internet Explorer 5 or lower.
<![endif]-->

Source: mediacollege.com

Note: These conditional comments are [no longer supported from IE 10 onwards](https://msdn.microsoft.com/library/hh801214(v=vs.85).aspx) — Flimm, Sep 06 '17 at 09:02

score 8 · Answer 8 · edited Jan 28 '22 at 10:12

This is for until Internet Explorer 9:

<!--[if IE ]>
    <style>
        .someclass{
            text-align: center;
            background: #00ADEF;
            color: #FFF;
            visibility: hidden;  // In case of hiding
        }
        #someotherclass{
            display: block !important;
            visibility: visible; // In case of visible
        }
    </style>
<![endif]-->

This is for after Internet Explorer 9

  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {Enter your CSS here}

score 5 · Answer 9 · edited Jan 28 '22 at 10:16

For the Internet Explorer browser:

<!--[if IE]>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode">
<![endif]-->

For all non-Internet Explorer browsers:

<![if !IE]>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<![endif]>

For all Internet Explorer versions greater than Internet Explorer 8 or all non-Internet Explorer browsers:

<!--[if (gt IE 8)|!(IE)]><!--><script src="/_JS/library/jquery-2.1.1.min.js"></script><!--<![endif]-->

score 3 · Answer 10 · edited Jan 28 '22 at 10:21

A conditional comment is a comment that starts with <!--[if IE]> which couldn't be read by any browser except Internet Explorer.

From 2011, conditional comments aren’t supported starting form Internet Explorer 10 as announced by Microsoft in that time: Conditional comments are no longer supported

The only option to use the conditional comments is to request Internet Explorer to run your site as Internet Explorer 9 which supports the conditional comments.

You can write your own CSS and/or JavaScript files for Internet Explorer only and other browsers won't load or execute it.

This code snippet shows how to make Internet Explorer 10 or Internet Explorer 11 run ie-only.css and ie-only.js which contains custom codes to solve Internet Explorer compatibility issues.

    <html>
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
      <!--[if IE]>
            <meta http-equiv="Content-Type" content="text/html; charset=Unicode">
            <link rel="stylesheet" type="text/css" href='/css/ie-only.css' />
            <script src="/js/ie-only.js"></script>
      <![endif]-->
    </html>

score 2 · Answer 11 · edited Apr 06 '22 at 01:01

This works for me across all Internet Explorer versions greater than version 6 (Internet Explorer 7, Internet Explorer 8, Internet Explorer 9, Internet Explorer 10, etc., Chrome 3 up to what it is now, and Firefox version 3 up to what it is now):

// Test if running in Internet Explorer or not
function isIE () {
    var myNav = navigator.userAgent.toLowerCase();
    return (myNav.indexOf('msie') != -1 || myNav.indexOf('trident') != -1) ? true : false;
}

Toshihiko · Answer 12 · 2016-06-03T04:43:56.430

1

In case you are working with IE 10 or above, as mentioned in http://tanalin.com/en/articles/ie-version-js/ the conditional comments are no longer supported. You might refer to https://gist.github.com/jasongaylord/5733469 as an alternative method, which the Trident version is checked as well from the navigator.userAgent. This also verified in case the browser is working in compatibility mode.

edited Jun 03 '16 at 04:43

answered Jun 03 '16 at 04:38

Toshihiko

325
1
8
20

score 1 · Answer 13 · edited Jan 29 '22 at 21:01

1

Thank you Fernando68. I used this:

function isIE () {
     var myNav = navigator.userAgent.toLowerCase();
     return (myNav.indexOf('msie') != -1 || myNav.indexOf('trident') != -1) ? true : false;
}

if(isIE()){
     $.getScript('js/script.min.js', function() {
            alert('Load was performed.');
     });
}

edited Jan 29 '22 at 21:01

Peter Mortensen

30,738
21
105
131

answered Nov 28 '16 at 20:26

Rodrigo Prazim

788
7
14

score 0 · Answer 14 · edited Jan 29 '22 at 21:10

0

I am using this JavaScript code to detect an Internet Explorer browser:

if (navigator.appVersion.toUpperCase().indexOf("MSIE") != -1 ||
    navigator.appVersion.toUpperCase().indexOf("TRIDENT") != -1 ||
    navigator.appVersion.toUpperCase().indexOf("EDGE") != -1)
{
    $("#ie-warning").css("display", "block");
}

edited Jan 29 '22 at 21:10

Peter Mortensen

30,738
21
105
131

answered Sep 30 '16 at 08:20

Muflix

6,192
17
77
153

– n00shie Aug 06 '13 at 22:46

Linked

Related