CODEWITHSUNDEEP
htmlinternet-explorerconditional-comments
user1516788
user1516788

Reputation: 1479

<!--[if !IE]> is not working as expected in this case

I'm having trouble getting

<!--[if !IE]>

to work. I'm wondering if it is because I have this in my document

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->

When I add

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

to my header for some reason, it doesn't work. However, if I add

<!--[if !IE]><!-->
    <style>
        All my CSS content in here
    </style>
    <!--<![endif]-->

to the actual HTML page (in the header) it works.

How can I fix it?

When I removed <!-->, I only checked in Internet Explorer (IE) which was working, but now back in Firefox the no-ie.css file had been applied to Firefox too. So I added back in the <!--> and removed the / (and added that into the main template so the CMS wouldn't add it back in) and all is working back in Firefox, but now the style sheet is being applied to IE!

So I tried

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

and

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

And that didn't work.

Basically I'm trying to get this page to work: http://css-tricks.com/examples/ResponsiveTables/responsive.php. But move the CSS content into a style sheet. Surely it's got to be simple. What am I missing? I'd rather not use jQuery if I don't have to.

Upvotes: 146

Views: 367875

Answers (15)

Fandango68
Fandango68

Reputation: 4868

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;
}

Upvotes: 2

Muflix
Muflix

Reputation: 6798

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");
}

Upvotes: 0

Rodrigo Prazim
Rodrigo Prazim

Reputation: 858

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.');
     });
}

Upvotes: 1

John Hayford
John Hayford

Reputation: 89

You need to add a space for the <!-- [if !IE] -->. 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] -->

Upvotes: 8

user1324409
user1324409

Reputation: 879

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.

Upvotes: 72

Shady Mohamed Sherif
Shady Mohamed Sherif

Reputation: 15759

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>

Upvotes: 3

Kapil
Kapil

Reputation: 191

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]-->

Upvotes: 5

Santhosh
Santhosh

Reputation: 525

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}

Upvotes: 8

BorisD
BorisD

Reputation: 2261

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

Upvotes: 8

Munchies
Munchies

Reputation: 444

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

Upvotes: 8

Francis
Francis

Reputation: 127

I use this and it works:

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

Upvotes: 11

Selay
Selay

Reputation: 6464

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

Upvotes: 40

Thinking80s
Thinking80s

Reputation: 2870

<!--[if !IE]><!--><script src="zepto.min.js"></script><!--<![endif]-->
<!--[if IE]><script src="jquery-1.7.2.min.js"></script><![endif]-->

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

Upvotes: 249

Toshihiko
Toshihiko

Reputation: 317

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.

Upvotes: 1

user1479055
user1479055

Reputation:

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.

Upvotes: 13

Related Questions