why does `` appear on IE-rendered page?

Question

This has got to be really boneheaded.. but after reading the same very simple answer over and over on various blogs and on the microsoft site, that AFAICT I AM doing it right, I am still stumped, so I ask here:

Why does the IE conditional in this test page render the literal <![endif]--> at the bottom of the page in IE, when viewed on a local network ? I am pretty sure that is the correct syntax for an IE 'Downlevel-hidden conditional comment'.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>IEconditionalSyntax_wtf.html</title>
</head>
<body>
    well?<br>
    <!--[if IE]>
        wtf?!
    <![endif]-->
</body>
</html>

Update:

to save your time reading all the comments... if you are having the same issue: Most of the comments below basically just propose possible (but inconclusive, ineffective) explanations, and a couple guys report that they were unable to reproduce the issue. So far it seems no one knows the answer. I only see the issue when viewing the page on IE9/Win7 (w/any browser/document mode)... on my local server (page served by my local iMac 10.6.8, w/built in webserver).

But just because no one was able to rid my local server of this issue does not necessarily mean that the below suggestions will not answer the issue for you. Until we know the answer(s) I suppose it is not helpful to assume anything. So you probably do want to try everything listed below, if you also have <![endif]--> appearing on your page in IE, for seemingly no good reason.

Patrick gives a great workaround, but it does rely on jquery.

I debated whether to award the bounty (that I started, and which expired on 16 April 2012), or accept an answer, so that where acknowledgement was due it was awarded... and there was no clear action for me.. so I just decided to let the system auto-award half the bounty to Patrick for the great (albeit jquery) workaround. I did not want to give the whole bounty because the whole point of the bounty was to satisfy my curiosity as to why I am seeing the conditional comment in the first place. I also did not want to accept any answer (so far) because in this case I am not going to use any workaround since the issue only appears on my local network and so is irrelevant for the production code live to the world.

I cannot [reproduce](http://phihag.de/2012/so/ie-condcoms.html) the behavior on IE9 ([screenshot](http://phihag.de/2012/so/ie-condcoms-screenshot.png)) — phihag, Mar 25 '12 at 03:17
The issue shows while using IE9, ...while using developer tools (F12) and having set 'browser mode' to IE7, IE8, or IE9... with 'document mode' set to the corresponding standards mode (NOT quirks mode). — govinda, Mar 25 '12 at 03:17
@govinda could you offer a screenshot of a publicly reachable page / [my demo page](http://phihag.de/2012/so/ie-condcoms.html)? — phihag, Mar 25 '12 at 03:20
Heres's a fiddle for anyone who wants to test: http://jsfiddle.net/eyZmc/ — Alex Parker, Mar 25 '12 at 03:21
I could not reproduce in W7, E9 with the developers tool and legacy document / standards mode settings as described. Which operating system are you running? — Alex Parker, Mar 25 '12 at 03:25
Guys, You are all great for jumping on this with me to figure out what is causing the unexpected behavior. @phihag, as per your suggestion, I uploaded my own public test: http://blisscode.com/IEconditionalSyntax_wtf.html .. and it *does* behave as expected.. so then I asked myself, **What** is different about my fail case.. and now I am *assuming* it has to do with the fact that with that fail case I am viewing a page local to my network: http://192.xxx.x.xxx/IEconditionalSyntax_wtf.html I suppose it is documented somewhere that IE conditionals behave differently under these conditions? — govinda, Mar 25 '12 at 03:33
If anyone could confirm this (IE's) behavior on your own local network, it would help put this thread to rest, possibly help someone else in the future, and give me a place to vote for a final answer. — govinda, Mar 25 '12 at 04:04
@govinda, I downloaded your public test, saved it locally, and viewed on IE 9 as you described, without seeing the issue in any mode. — Jukka K. Korpela, Mar 25 '12 at 05:56
JukkaK that is weird. I mean *my* case is weird ;-) OK, anyone still with me, to prove I am not an idiot (but some hidden detail is still eluding us), and get to the bottom of this, here again is the code: http://blisscode.com/IEconditionalSyntax_wtf.html ...and here are my results: ..remote, as expected: http://blisscode.com/IEconditionalTest_remote.png ..local, *NOT* as expected: http://blisscode.com/IEconditionalTest_local.png I can't believe I am the first to discover this. @Alex this is on Windows7. — govinda, Mar 25 '12 at 15:27
@govinda I would guess what you're seeing is intranet vs. internet settings. See http://stackoverflow.com/questions/2518256/override-intranet-compatibility-mode-ie8 *By default IE8 forces intranet websites into compatibility mode* I guess the same is true for 9? — ta.speot.is, Mar 25 '12 at 23:17
@ta.speot.is You may be right. I don't know enough about IE to be sure of anything, except annoyance. I tried all the remedies I could (most of 'em) from the these threads: http://stackoverflow.com/questions/2518256/override-intranet-compatibility-mode-ie8 , http://stackoverflow.com/questions/2742853/force-internet-explorer-8-browser-mode-in-intranet , including X-UA-Compatible meta tags, and all the various tweaks to IE settings, but have had no luck so far. I was unable to try the idea of the httpProtocol tweak to web.config (I assume that is only for windows server admins?) — govinda, Mar 26 '12 at 03:11
So far I'm not even sure all the various threads about IE's compatibility mode are certainly of interest in solving my issue? Let me ask: Is it known that IE's compatibility mode will cause a 'Downlevel-hidden conditional comment' to display its closing endif tag in the rendered HTML? When I view my page remotely, on the inTERnet, and purposely turn ON compatibility mode (via the developer tools, or via Tools > Compatibility View settings), then the closing endif conditional comment does NOT display... so I am not convinced we are even on the right trail. Weird no one can reproduce this. — govinda, Mar 26 '12 at 03:20
I'm positive my workaround can be written without jquery, (pure js) I just happened to be using it, and it made it easier, so why not? At some point when I have some extra time I'll look into removing that dependency. — Patrick Lee Scott, Apr 18 '12 at 13:37

Patrick Lee Scott · Answer 1 · 2013-01-15T21:28:06.193

6

IE10 won't support conditional comments, so I suggest using a different method altogether.

Javascript works well for this.

Here is what I do that is A LOT easier to use, requires jquery

var userAgent, version;

if ($.browser.msie) {
  version = "ie" + $.browser.version.substring(0, 1);
  $("body").addClass("ie " + version);
} else if ($.browser.mozilla) {
  $("body").addClass("mozilla");
  if (navigator.userAgent.toLowerCase().indexOf('firefox') !== -1) {
    userAgent = navigator.userAgent.toLowerCase();
    userAgent = userAgent.substring(userAgent.indexOf('firefox/') + 8);
    userAgent = userAgent.substring(userAgent.indexOf('firefox/'), userAgent.indexOf('.'));
    version = "ff" + userAgent;
    $("body").addClass(version);
  }
} else if ($.browser.opera) {
  $("body").addClass("opera");
} else if ($.browser.webkit) {
  $("body").addClass("webkit");
}

Then you can write css like this:

span.something { width: 30px; }
.ie7 span.something {width: 25px;}

And, even better, use this in conjunction with modernizr and you can write rules based on feature support as well.. Note that those are global js variables, so you can even use those for different functionality based on browser. Like, if you need to write an ie7 hack or something.

EDIT: replaced code with less verbose version, same result

edited Jan 15 '13 at 21:28

answered Apr 09 '12 at 22:39

Patrick Lee Scott

8,217
3
36
42

it will be fine with me if IE10 ignore that conditional comment. I am only using it to serve some CSS to IE8. – govinda Apr 09 '12 at 22:41
yes, but what will IE10 do with the comments that point to IE8 when you load it? – Patrick Lee Scott Apr 09 '12 at 22:44
You shouldn't rely on proprietary Microsoft stuff when you can avoid it, the reason Microsoft is removing support for conditional comments is because they are bad and they know it. – Patrick Lee Scott Apr 09 '12 at 22:54
thanks for your great answer! I gather that you are giving great advice here.. and I appreciate it! ..and will save all this for next time. Meanwhile I am just wanting to know why I see the conditional comment. I am not loading jquery for the real page in question, so it seems overkill to start doing that for just my one little snippet of IE8 CSS. (Also, I have been writing my own custom/simple JS, and have yet to really get into jquery.) As for what IE10 will do with the conditional comment, ... well I assume just ignore it like other browsers, right? Why worry about that? – govinda Apr 10 '12 at 04:39
Why won't IE10 support conditional comments? They were probably the best thing IE did besides `innerHTML`... – Niet the Dark Absol Apr 16 '12 at 23:15
@Kolink I guess only Microsoft can answer that with authority... but I am guessing they are (finally) running scared that they will lose the rest of their market share.. because us devs were/are sick of trying to deal with IE idiosyncrasies and we all slowly influenced the masses to use other browsers. I suspect Microsoft is concerned that if they do not stick to the standards better then they will fall off the map. – govinda Apr 17 '12 at 00:49

score 4 · Answer 2 · answered Mar 29 '12 at 23:10

4

I'm dealing with a similar issue at work atm.

I would recommend testing it again with auto-detection of intranet off:

Access Internet Options via Tools menu in IE or via the Control Panel

Plus all compatibility mode settings set to off

Plus with the addition of meta tag IE=edge

I think it may resolve the issue - IE is a strange beast!

answered Mar 29 '12 at 23:10

Chris Cannon

1,157
5
15
36

Plus an xhtml transitional or html 4 transitional doc type – Chris Cannon Mar 29 '12 at 23:30
IE sure *is* a strange beast! I was hoping you'd nailed it, but I'm not seeing the desired result. I did all you say in this answer (everything, together) - incl. trying both html4 transitional doctype and XHTML transitional doctype, but no luck. Anyway we need HTML5, even if downgrading the doctype would solve it. You really have it solved? If so, then I have to believe that there is some difference in our environments, somewhere.. we just don't know what it is yet. Here's my most-recent attempt: http://blisscode.com/IEconditionalSyntax_wtf.html That's the meta tag you meant, right? – govinda Mar 29 '12 at 23:44
From your local server? And did you perform a hard-refresh after each change? – Chris Cannon Mar 29 '12 at 23:51
yes, right, as I say above, the issue only shows when viewing the page **locally**, on my work network... so the URL is http://192.xxx.x.xxx/IEconditionalSyntax_wtf.html . That same page viewed remotely at http://blisscode.com/IEconditionalSyntax_wtf.html does NOT show the problem. "Hard-refresh", what is that? I have been using F5, but in light of your mentioning 'hard-refresh', I just tried again after doing this: f12 > cache > Always refresh from server. I know it is getting a fresh copy, from the server, because I change the number concatenated on the end of the word "test". – govinda Mar 30 '12 at 00:02
Try self-closing all
tags i.e.
see if that makes a difference. – Chris Cannon Mar 30 '12 at 00:15
didn't make any difference, but thanks for keeping trying @Chris ! :-) – govinda Mar 30 '12 at 00:47
try using windows line endings crlf after each tag – Chris Cannon Mar 30 '12 at 00:57
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/9484/discussion-between-govinda-and-chris-cannon) – govinda Mar 30 '12 at 01:00
were you able to reproduce the issue? If so, were you able to solve it on your end? – govinda Mar 31 '12 at 01:54
1

I did try to reproduce the issue with no success - tried every configuration of IE9 imaginable - I'm wondering if your local server is sending some weird data in the HTTP headers. – Chris Cannon Apr 01 '12 at 00:43
I am not much of a server admin, but if I understand correctly, here they are: http://blisscode.com/IEconditionalTest_local_requestHeaders.png http://blisscode.com/IEconditionalTest_local_responseHeaders.png Look OK AFAICT. No? – govinda Apr 02 '12 at 00:55

Jon Grant · Answer 3 · 2012-04-16T15:37:20.477

It's because IE defaults to compatibility view when on a local network:

Many sites found on corporate intranets (read: the local network, like http://myPortalSite) are Internet Explorer 7 capable today and expect “IE” to act like IE7. In order to preserve compatibility with these line-of-business websites and applications, IE8 defaults to Compatibility View when displaying content in the ‘local intranet’ zone. An exception to this is ‘Localhost’ and the loopback address (e.g. 127.0.0.1 + IPv6 equivalent). These addresses display in IE8 Standards Mode by default in order to meet the needs of web developers and designers who often test pages meant for Internet consumption (where IE8 Standards is the default) on local web servers.

Users can override the ‘local intranet’ setting by un-checking ‘Display intranet sites in Compatibility View’ at Tools -> Compatibility View Settings.

http://blogs.msdn.com/b/ie/archive/2009/06/17/compatibility-view-and-smart-defaults.aspx

To clarify, you are seeing this because you are accessing the site using 192.168.x.x, whereas I'm willing to bet everyone else who isn't seeing this issue is using 127.0.0.1/localhost.

Thanks Jon, PilotBob from this thread http://stackoverflow.com/questions/2518256/override-intranet-compatibility-mode-ie8 , which ta.speot.is (above) suggested in the initial comments on my initial question, covered that possibility. IOW I tried that already and the issue does not go away. So it leaves me scratching my head as to what to think. Further comments? — govinda, Apr 16 '12 at 18:17

score 2 · Answer 4 · edited Mar 13 '13 at 18:30

2

I've added  instead of <![endif]--> and it disappears.

edited Mar 13 '13 at 18:30

BoltClock

700,868
160
1,392
1,356

answered Mar 01 '13 at 12:15

AlexGach

102
4

score 1 · Answer 5 · edited Mar 13 '13 at 18:30

I was having a similar problem where the conditional statement was in my <head> and <![endif]--> was showing at the top of the page when I displayed it in any IE browser, even when I uploaded the code to the server.

Since it was the last line before </head> I decided to move my print css call (which I needed to do anyway) to be the last line before the </head> and "voila!" now the <![endif]--> no longer displays in IE -- even on my local server.

score 1 · Answer 6 · edited Feb 05 '14 at 23:11

1

HTML

<span class ="clean"><!--[if lt IE]></span>

<span class="clean"><![endif]--></span>

CSS

.clean { display: none; }

edited Feb 05 '14 at 23:11

Code Maverick

20,171
12
62
114

answered Feb 05 '14 at 22:46

Samos

11
2

score 0 · Answer 7 · answered Apr 16 '12 at 09:14

0

the conditional comments are rendered by internet explorer alone,the internet explorer 9 and above should support most of the elements in css.the comments will work fine with all versions of IE(best to use with 5 and 6).

answered Apr 16 '12 at 09:14

ksa

311
1
10
29

ksa, I am aware of these things. If you read the comments on other answers above, you see I am only using the conditional comment to alter one css rule for IE8 only. – govinda Apr 16 '12 at 14:24

score 0 · Answer 8 · answered Jul 15 '14 at 21:24

I had recently this same issue. In my case the conflicting code was one of the elements that I had inside the conditional statement for IE that had the lowest z-index in the page. After setting this in order so that it would not be the lowest z-indexed it was fixed.

why does `` appear on IE-rendered page?

8 Answers8

HTML

CSS