19

I have an angularjs site deployed to IIS on a Windows Server 2012 R2 host inside my firewall. When I RDP into the server and, from there, navigate to 

http://localhost/Foo

in IE11, everything behaves as one would expect;my page is served to the browser.

But, when I attempt to browse 

http://servername/Foo

in IE11, I get an error thrown from line 1016 of angular.js

"Object doesn't support property or method 'querySelector'"

This only occurs in Internet Explorer.
Everything tested out fine in Chrome as well as Firefox.

Does anyone have a clue as to why this is happening and what I can do to fix it?

K. Alan Bates
  • 3,104
  • 5
  • 30
  • 54

2 Answers2

44

The solution to this problem was to add the

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

tag as the first item in the Head.

The meta tag has to be the first tag in the head for IE to pick up edge mode; otherwise, it ignores the DOCTYPE that is supposed to instruct IE not to fall into quirks mode.

I had included the meta tag as an afterthought when I was deploying and had typed it in at the bottom of the head.

MSDN|Specifying Legacy Document Modes

The X-UA-Compatible header isn't case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements.

The default Compatibility Settings in Internet Explorer cause IE to silently behave differently for internal sites and external sites.

Setting the X-UA-Compatible meta tag explicitly declares that browsers should be receiving your internal site in Edge mode without the requirement of administrating Compatibility Settings, but the header must be specified as the first tag in the head in order to have this effect.

Community
  • 1
  • 1
K. Alan Bates
  • 3,104
  • 5
  • 30
  • 54
  • This tag isn't needed if you have ` ` at the very beginning of your document. Manually-overriding the doc mode via the `x-ua-compatible` meta tag or header is meant only as a means of temporarily repairing legacy documents. – Sampson Sep 02 '14 at 23:55
  • This isn't true. I know it's supposed to be true, but it is not...and that was the source of the question. was already set and was inspected in IE11's F12 Dev Tools as being present. Document mode was still loading "IE7(default)" when accessing the site by machine name. When accessing under localhost, Document mode was "Edge(default)" – K. Alan Bates Sep 03 '14 at 00:08
  • 2
    Ah, I'm sorry, I see now that you were accessing this via the intranet. Intranet sites will load in Compat View by default. Check your gear icon for "Compatibility View Settings" to modify this behavior. – Sampson Sep 03 '14 at 00:13
  • @K.AlanBates Jonathan is right, the `meta` is not needed. Please check an SO answer about [Compatibility views](http://stackoverflow.com/questions/13284083/ie10-renders-in-ie7-mode-how-to-force-standards-mode). – Teemu Sep 03 '14 at 04:59
  • 4
    The meta is needed I don't want to administrate Compatibility settings. It's completely unnecessary. The meta tag forces the browser to expose the host API that I require, regardless of that user's Compatibility Settings. Why is there resistance to support the painless option of setting the x-ua-compatible meta tag? It overrides the user's Compatibility Mode settings. – K. Alan Bates Sep 28 '14 at 13:31
  • Thank you SOOOO much for this I was ripping my hair out trying to figure out what the heck was wrong with my page in IE. – Brady Mar 11 '15 at 22:57
  • Is there any other ways to this? when I've applied it on the first item in the head, the layouts rendered that was fixed on standard IE8 will be back to it's current issues (inline buttons going to the next line, etc.) – Cedric Jan 24 '17 at 05:32
2

Disable Compatibility view mode for your intranet and site that you're trying to access and this will solve your problem.

user5342757
  • 21
  • 1
  • 3
    What you have proposed is an administrative solution that will not work if some content on your intranet was built to rely on [Compatibility Mode] and other intranet content needs [Edge Mode]. Doing so will simply trade one set of problems for another (arguably worse) set of problems. – K. Alan Bates Sep 16 '15 at 16:04