How to make a meta tag the first one in the <head> section?

user550738 picture user550738 · Jul 28, 2011 · Viewed 27.4k times · Source

I'm using JSF2, GlassFish 3.1, PrimeFaces 2.x.

I'm having strange rendering problems on IE9. I'm supposed to be able to force IE9 to render as IE9 by inserting the following:

<html>
<head>
  <!-- Enable IE9 Standards mode -->
  <meta http-equiv="X-UA-Compatible" content="IE=9" />
...

But the thing is, it's not working because (I'm told) the meta tag MUST be the first tag in the section.

When I do this in my XHTML file ...

<html ...>

<f:view contentType="text/html" locale="#{loginHandler.currentLocale}">

<h:head>
    <!-- Enable IE9 Standards mode -->
    <meta http-equiv="X-UA-Compatible" content="IE=9" />

The resulting HTML looks like this, where JSF/PrimeFaces has inserted a bunch of "link" and "script" tags before my new meta tag.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="/orcf-webui/javax.faces.resource/jquery/ui/jquery-ui.css.jsf?ln=primefaces&amp;v=2.2" />
<link type="text/css" rel="stylesheet" href="/orcf-webui/javax.faces.resource/wijmo/wijmo.css.jsf?ln=primefaces&amp;v=2.2" />
<script type="text/javascript" src="/orcf-webui/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces&amp;v=2.2"></script>
<script type="text/javascript" src="/orcf-webui/javax.faces.resource/jquery/ui/jquery-ui.js.jsf?ln=primefaces&amp;v=2.2"></script>
<!-- Enable IE9 Standards mode -->
<meta http-equiv="X-UA-Compatible" content="IE=9" />

Is there any way to get my meta tag in the right place so it will work? (Or an alternative way to make this IE9 problem go away?

Answer

Danubian Sailor picture Danubian Sailor · Dec 3, 2012
  1. The meta tag must go before all PrimeFaces stuff: http://blogs.msdn.com/b/cjacks/archive/2012/02/29/using-x-ua-compatible-to-create-durable-enterprise-web-applications.aspx

  2. HTTP Header and HTML HEAD are completly different things.

  3. In PrimeFaces 3.0 the new facet was added to h:head: http://blog.primefaces.org/?p=1433 So the solution would be:

<h:head>
    <f:facet name="first">
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    </f:facet>
</h:head>