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?
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.
Apparently setting
<!DOCTYPE html>
inside the page was not enough to appease Internet Explorer. The browser was still picking up IE7 as its default document mode when referencing my site by http://machine:80
This was due to the default Compatibility Settings in Internet Explorer for viewing internal sites that cause IE to silently behave differently than it would for external sites.
Setting the X-UA-Compatible meta tag explicitly declares that internal browsers should be receiving the site in Edge mode without the requirement to administrate Compatibility Settings, but must be specified as the first tag in the head in order to have this effect.