110

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.

thasmo
  • 9,159
  • 6
  • 27
  • 32
  • 18
    Asking myself the same question! I know they dropped the conditional comments in IE10 but IMHO the emulator *should* consider them when testing for older browsers. – Alexander Rechsteiner Oct 28 '13 at 16:35
  • 12
    Indeed, that makes the feature unusable. – thasmo Oct 29 '13 at 10:02
  • 3
    The real question is why are you using compatiblity mode? My advice is to avoid compat mode like the plague. It certainly isn't suitable for testing, regardless of the issue you've described, as there are known bugs and quirks with it that go all the way back to when they first introduced compat mode. If you're testing for backward compatibility, you really need to use a real copy of IE8 (and IE9, etc). Go to http://modern.ie/ and download the VMs they provide for testing. – Spudley Nov 04 '13 at 17:21
  • 19
    There is a bug open on IE bug tracker. I encourage everyone to visit and tell Microsoft that you can reproduce this. https://connect.microsoft.com/IE/feedback/details/806767/conditional-comments-do-not-work-when-emulating-document-modes-via-f12-developer-tools – Evgeny Nov 07 '13 at 20:10
  • 15
    I think using compatibility mode for testing makes more sense than downloading a 1/2 gigabyte or so image for every browser. So there are bugs, (and this is probably one of them), but 99.% of the time it just works. – Rolf Nov 29 '13 at 06:20
  • Another big disadvantage of using VM is that you don't have access to Dev Tools IE11 provides even in emulator mode. – serg Feb 20 '14 at 19:57
  • 1
    We use BrowserStack - it costs money, granted, but it's not that much if you're a web agency or something and it means that you can provide better service to your customers. Forget VMs - they're the past. We used to use those but they took up like 3GB on each of our machines, that's why we started looking for alternatives. – ClarkeyBoy Jun 30 '15 at 13:46
  • @ClarkeyBoy -- worrying about using 3GBs of space sounds like the past to me... – simon Jul 14 '15 at 15:28

8 Answers8

29

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!

L84
  • 45,514
  • 58
  • 177
  • 257
20

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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
DylRicho
  • 895
  • 1
  • 10
  • 25
  • 4
    Yes, IE 11 is a better experience, with all the animations that actually work :). Yes MS has a history of "tinkering" with stuff just when users are starting to get used to them. Look at what they did to Windows XP... "Fixing what's not broken", some people would say. Anyway that sucks – Rolf Nov 29 '13 at 06:24
  • 9
    Internet Explorer browsers are so bad. No consistency between versions. Who the hell developped this? even my grand ma could do a better job! – Adriano Jan 24 '14 at 10:18
  • 4
    EDIT: they are fixing this (or trying) since 22nd January 2014 https://connect.microsoft.com/IE/feedback/details/806767/conditional-comments-do-not-work-when-emulating-document-modes-via-f12-developer-tools – Adriano Jan 24 '14 at 10:26
  • @AdrienBe Well, that's certainly a step in the right direction. – DylRicho Jan 24 '14 at 18:59
  • 1
    @Anthony My answer is incorrect? How so? It's basically saying what you've just said. – DylRicho Mar 29 '14 at 17:21
  • @DylRicho ahh, i missed where you said "simply ignores them". Yes, i can confirm that ie11 ignores them. – carrabino Apr 01 '14 at 03:17
  • @AdrienBe: Really, your grandma? Wow. What's the last browser you and your grandma developed together? I bet it's good. Granted, IE has issues, but it's a hell of a lot better than what I would do, so I don't moan about it. – hofnarwillie Mar 10 '15 at 11:11
  • @hofnarwillie sigh.... I dont make car either, but should i not moan abt a car because it's crap or dangerous? Same goes for anything. I'm unhappy abt this product, i like the other ones better, and yes I think it's fine to say it. Chrome, firefox abd safari are much better. Shame on MS for producing this garbage. – Adriano Mar 10 '15 at 13:01
  • @AdrienBe I ask again: When last did you build a browser? Also, unlike a browser, a car is purchased and therefore the behavior described is paid for and then you can legally expect it to work. How much did you pay for IE? – hofnarwillie Mar 10 '15 at 16:24
  • @hofnarwillie dont get me wrong, I do NOT use it, ever. However, many people do because they have zero knowledge regarding browsers or their corporate policy prevent them from installing something else. And every web project needs to throw in some extra work to support this. This discussion is going nowhere, i obviously disagree with u, if u are fine using garbage just because it's free when u have the choice for other free but good product, then fine, why not. – Adriano Mar 10 '15 at 16:30
  • @AdrienBe I never said I like it either. I just get tired of people moaning about it. It has become more of a "follow the crowd" thing. Like it's cool to complain about IE. Some people moan about it without even really knowing the pain points that IE provide. I get annoyed by it for the same reason that I dislike people who instinctively buy an iPhone purely because everyone does. Interestingly, no-one moans about the hoops that you have to jump through when doing web development for an apple product. I have found that nearly as frustrating as developing for IE. – hofnarwillie Mar 10 '15 at 16:39
  • @hofnarwillie I do know far too many of IE bugs/hoops/hacks. I actually could probably do it a full time job & consult companies/team having IE-specific issues. So I might be elligible for a right to complain about IE ;) Fair enough, I never did development for apple products so can't comment about that. I suppose the main reason we hear so much about IE is proportional to the amount of people forced to develop & use this product. – Adriano Mar 10 '15 at 16:47
17

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 */
}
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
cmartin
  • 2,819
  • 1
  • 26
  • 31
8

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" />');
}
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Andrei Konstantinov
  • 6,971
  • 4
  • 41
  • 57
  • 2
    I've tested the document modes and it seems not to change the user agent?! – mgutt Feb 26 '14 at 14:34
  • @mgutt You're right. There are two options in Emulation - Document mode and User agent. Document mode changes how the browser works and how it renders the page, and User Agent change what browser telling site about browser's version. (in my example it's $_SERVER['HTTP_USER_AGENT'] variable what contains this info) So basically you need to change both this options to, for example, IE8. – Andrei Konstantinov Mar 01 '14 at 07:38
  • @ Andrew Thank you. Now I found the setting. The problem was the german translation. They translated "user agent" with "Zeichenfolge des Benutzer-Agents" and I thought this meant the charset. Some things should not be translated ;) – mgutt Mar 02 '14 at 10:25
  • 2
    This solution is the best. I've converted it to ASP.NET MVC Razor and it works perfectly: @{if (Request.UserAgent.Contains("MSIE 8.0")) { /*your metatag here*/ }} – Valerio Gentile Mar 05 '14 at 12:14
  • This site is a handy reference for what all the permutations of user agent strings look like: http://www.useragentstring.com/pages/Internet%20Explorer/ – Drew Aug 30 '15 at 17:34
8

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.

user1429980
  • 6,872
  • 2
  • 43
  • 53
4

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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
El Kabong
  • 717
  • 1
  • 8
  • 15
  • Conditional comments don't rely on script, or any third party code. – Walf Feb 05 '14 at 02:08
  • @Walf - true, but they're also not supported in IE. See here: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx – El Kabong Jan 13 '15 at 00:20
3

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.

  • But visitors of your website would have to do the same to get the same result. Making it useless. – paddotk Mar 21 '15 at 00:26
  • Yes. But this is for if you are testing older versions of IE through IE11 developer tools. So using IE11 but running as IE8, the conditional comments will not work. For someone actually using IE8, the conditional comments will work. Probably ^_^ –  Mar 23 '15 at 08:53
1

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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Roben B
  • 11
  • 1