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

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

---

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.

---

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:

In IE11, click on "Tools" Compatibility View settings 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.

---

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.

---