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

HtmlInternet ExplorerConditional Comments

Html Problem Overview

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.

Html Solutions

Solution 1 - Html

<!--[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.

Solution 2 - Html

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.

Solution 3 - Html

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: https://stackoverflow.com/questions/14892095/browser-msie-error-after-update-to-jquery-1-9-1

Solution 4 - Html

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.

Solution 5 - Html

I use this and it works:

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

Solution 6 - Html

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

Solution 7 - Html

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

Solution 8 - Html

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

Solution 9 - Html

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}

Solution 10 - Html

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

Solution 11 - Html

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>

Solution 12 - Html

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

Solution 13 - Html

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.

Solution 14 - Html

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

Solution 15 - Html

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");
}
Categories
Recommended Html Solutions
Recommended Internet Explorer Solutions
Recommended Conditional Comments Solutions

Previous Solution:

anchor jumping by using javascript

JavascriptHtmlFunctionAnchorHref

Next Solution:

Make the first letter uppercase inside a django template

DjangoDjango Templates

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser1516788View Question on Stackoverflow
Solution 1 - HtmlThinking80sView Answer on Stackoverflow
Solution 2 - Htmluser1324409View Answer on Stackoverflow
Solution 3 - HtmlSelayView Answer on Stackoverflow
Solution 4 - Htmluser1479055View Answer on Stackoverflow
Solution 5 - HtmlFrancisView Answer on Stackoverflow
Solution 6 - HtmlBorisDView Answer on Stackoverflow
Solution 7 - HtmlJohn HayfordView Answer on Stackoverflow
Solution 8 - HtmlMunchiesView Answer on Stackoverflow
Solution 9 - HtmlChintu the cool kidView Answer on Stackoverflow
Solution 10 - HtmlKapilView Answer on Stackoverflow
Solution 11 - HtmlShady Mohamed SherifView Answer on Stackoverflow
Solution 12 - HtmlFandango68View Answer on Stackoverflow
Solution 13 - HtmlToshihikoView Answer on Stackoverflow
Solution 14 - HtmlRodrigo PrazimView Answer on Stackoverflow
Solution 15 - HtmlMuflixView Answer on Stackoverflow