title: HTML X-UA-Compatible tag not working in IE 9
body: <p>I am getting the error: X-UA-Compatible META tag ('IE=7') ignored because document mode is already finalized.</p>
  
  <p>I have read that the fix for this is that the meta tag is not declared high enough in the head tag, however I have tried moving this meta tag to be the very first line of the head tag and that does not fix the error.</p>
  
  <p>I am working in a Grails .gsp file and the file also uses knockout js.</p>
  
  <p>Here is the relevant code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;!--[if lt IE 7 ]&gt; &lt;html lang="en" class="no-js ie6"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 7 ]&gt;    &lt;html lang="en" class="no-js ie7"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 8 ]&gt;    &lt;html lang="en" class="no-js ie8"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 9 ]&gt;    &lt;html lang="en" class="no-js ie9"&gt; &lt;![endif]--&gt;
  &lt;!--[if (gt IE 9)|!(IE)]&gt;&lt;!--&gt; &lt;html lang="en" class="no-js"&gt;&lt;!--&lt;![endif]--&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;title&gt;myInfinitec Membership Management&lt;/title&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;link rel="shortcut icon" href="/ucpmanagementportal/static/images/favicon.ico" type="image/x-icon"&gt;
  
    &lt;meta name="layout" content="main"/&gt;
  
  
  
  
          &lt;script src="/ucpmanagementportal/static/plugins/jquery-1.7.1/js/jquery/jquery-1.7.1.min.js" type="text/javascript" &gt;&lt;/script&gt;
  &lt;link href="/ucpmanagementportal/static/bundle-bundle_coreCSS_head.css" type="text/css" rel="stylesheet" media="screen, projection" /&gt;
  
  
  
      &lt;/head&gt;
  </code></pre>
  
  <p>Edit:  In the IE developer window there are "Text- empty text node" lines being generated between every line. Perhaps this counts as having something before the X-UA-Compatible meta tag.  I read that the fix is to add display: block and zoom: 1 to the affected elements but this does not work.  Here is an example of what I am describing:</p>
  
  <pre><code>&lt;head&gt;
  Text - Empty Text Node
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
  Text - Empty Text Node
  &lt;meta style="display: block; zoom: 1;" http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/&gt;
  Text - Empty Text Node
  </code></pre>