Why doesn't Internet Explorer 11 honour conditional comments even when emulating Internet Explorer 8 document mode?

Question

I'm using the new Internet Explorer 11 developer tools to switch the document mode to "8", but conditional comments are still ignored, that is, they are not properly parsed and behave like normal comments. So any referenced file inside the conditional comment is not requested/loaded by the browser.

Why does this happen? Is it a bug?

If you think that this is indeed a bug that needs to be fixed, please go in and say that you too can reproduce this on the Microsoft bug report that is reported for this issue:
Conditional comments do not work when emulating document modes via F12 Developer Tools.

Update: This issue has been reported to be fixed in the mentioned bug report.

Answer 1

According to Jacob Rossi [MSFT]

This should be fixed in Update 1 for IE11, released last week.

That was posted on April 22, 2014.

In running a few tests myself it does appear that this was fixed and all is running smoothly again for testing the most amazing browser ever produced...Internet Explorer!

Answer 2

I just tried using this in Internet Explorer 11 on Windows 7 to make sure my used HTML5 semantic elements were being created for Internet Explorer 8 and below (via conditional comments), and the browser simply ignores them. -_-

This feature worked perfectly fine in Internet Explorer 10, and Microsoft just had to tinker with it, didn't they?

<!--[if lte IE 8]><script src="ie8-html5.js"></script><![endif]-->

Apart from this, I'm actually enjoying Internet Explorer, which makes for a change.

Answer 3

This worked for me and seems like the most elegant/easy fix (Internet Explorer 10 and Internet Explorer 11 I guess are the only browsers that support -ms-high-contract):

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */
}

Answer 4

I recently ran into the same problem. I also found that some conditional comments work:

• gt and lt worked fine
• gte and lte never worked

So one potential solution would be to change the conditional statements to use the gt and lt operators.

The other alternative, which I found more useful, was to use a service like browserstack.

Answer 5

I have another solution for this.

Internet Explorer 11 with Internet Explorer 8 compatibility mode turned on contains the string 'MSIE 8.0', so:

(PHP example)

if (strpos($_SERVER['HTTP_USER_AGENT'],'MSIE 8.0') !== false) {
    $head[] = sprintf('<link rel="stylesheet" href="ie8.css" />');
}

Answer 6

I had the same issue - it drove me nuts all morning. I added Modernizr, and I selected all the options, including yepnope.js.

So now my test looks like this:

Modernizr.load({
            test: Modernizr.canvas,
            nope: ['Content/Site-ie-8.min.css', 'Content/font-awesome-ie7.min.css']
});

In this case I test for canvas (which isn't supported prior to Internet Explorer 9), so I load my conditional content. This now works when switching browser modes in Internet Explorer 11 developer tools.

Answer 7

I didn't see it mentioned here, but in this bug report it is noted that, if you change the compatibility view settings, the conditional comments work as expected. So:

1. In IE11, click on "Tools"
2. Compatibility View settings
3. Type in the URL and click Add

Seems to be working fine now on my localhost. I have not tested this extensively but maybe it will help someone.

Answer 8

Some of the conditional comments are working such as 'gt' and 'lt', but for example <!--[if IE 8]> is not working. This surely is inconvenient for developers who want to try how their webpages look on different versions of Internet Explorer browsers, but it is not all bad news.

Although the conditional comments aren't working, you can still test how your webpage looks in each of the Internet Explorer versions by appending the stylesheets one at a time: let's say you got a stylesheet for Firefox, Chrome, Internet Explorer 10 and Internet Explorer 11 called 'screen.css', and another stylesheet ONLY for Internet Explorer 9 called 'screen-ie9.css' and another one ONLY for Internet Explorer 8 called 'screen-ie8.css'.

To test your webpages ONLY for Internet Explorer 9, you can do this:

<link rel="stylesheet" href="path/css/screen.css"     type="text/css" />
<link rel="stylesheet" href="path/css/screen-ie9.css" type="text/css" />

and in the F12 developer tools, Emulation section, set the 'Document Mode' to '9' and the 'User agent string' to 'Internet Explorer 9'. The Document Mode is the Standard that Internet Explorer 9 uses and the User agent string is the browser itself.

P.S: I'm assuming that the 'screen.css' is your base stylesheet which is the reason I am calling it first than "overwriting" the Internet Explorer 9 fixes later by calling 'screen-ie9.css' second.

By doing this, you can be "sure" (I have to test with VMs in order to write the word 'sure' without quotes) that you are viewing your webpage on an Internet Explorer 9 browser. When you are done testing and styling on Internet Explorer 9, and you want to test with Internet Explorer 8, you can easily do the same trick by replacing this:

<link rel="stylesheet" href="path/css/screen-ie9.css" type="text/css" />

with this:

<link rel="stylesheet" href="path/css/screen-ie8.css" type="text/css" />

So, it is just a matter of MINOR inconvenience from Microsoft's side, BUT the new F12 developers' tools are offering LOTS of amazing features, which makes this not that much of a big deal.