如何确保<meta http-equiv="X-UA-Compatible">位于<head>元素首位

方案1：配置HTTP响应头（最推荐） #

该方案完全规避meta标签顺序问题，IE读取X-UA-Compatible时会优先采用响应头配置，优先级远高于页面内的meta标签，无需调整页面代码结构即可生效。
你可以选择以下任意一种方式配置：

方式1：在项目web.xml中添加过滤器 #

以Tomcat自带的响应头过滤器为例，配置如下：

<filter>
    <filter-name>addXUAHeader</filter-name>
    <filter-class>org.apache.catalina.filters.HttpHeaderSecurityFilter</filter-class>
    <!-- 关闭不需要的默认安全头 -->
    <init-param>
        <param-name>antiClickJackingEnabled</param-name>
        <param-value>false</param-value>
    </init-param>
    <init-param>
        <param-name>blockContentTypeSniffingEnabled</param-name>
        <param-value>false</param-value>
    </init-param>
    <init-param>
        <param-name>xssProtectionEnabled</param-name>
        <param-value>false</param-value>
    </init-param>
    <!-- 配置自定义X-UA-Compatible头 -->
    <init-param>
        <param-name>customHeaderName</param-name>
        <param-value>X-UA-Compatible</param-value>
    </init-param>
    <init-param>
        <param-name>customHeaderValue</param-name>
        <param-value>IE=edge,chrome=1</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>addXUAHeader</filter-name>
    <url-pattern>/*</url-pattern>
    <dispatcher>REQUEST</dispatcher>
    <dispatcher>FORWARD</dispatcher>
</filter-mapping>

如果不使用Tomcat内置过滤器，也可以自行实现简单的Servlet过滤器，在doFilter方法中添加以下代码即可：

response.setHeader("X-UA-Compatible", "IE=edge,chrome=1");

方式2：在应用服务器/反向代理层配置 #

如果你的应用有前置Nginx、Apache等服务，可以直接在服务端配置响应头，以Nginx为例，配置如下：

add_header X-UA-Compatible "IE=edge,chrome=1" always;

方案2：强制meta标签为head第一个子元素 #

如果你坚持使用页面内meta标签实现，可以通过以下方式调整顺序：

方式1：替换h:head为原生head标签 #

h:head标签默认会将BootsFaces、JSF的内置资源插入到最顶部，你可以将其替换为原生HTML <head> 标签，优先写入meta标签后再手动引入BootsFaces资源：

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>       
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My System</title>
    <!-- 手动引入BootsFaces核心资源 -->
    <h:outputScript library="bsf" name="js/jquery.min.js" />
    <h:outputScript library="bsf" name="js/bootstrap.min.js" />
    <h:outputStylesheet library="bsf" name="css/bootstrap.min.css" />
    <h:outputStylesheet library="bsf" name="css/bsf.css" />
    <!-- 自有业务资源 -->
    <h:outputScript library="mySystem" name="js/mySystem.js" />
    <h:outputStylesheet library="mySystem" name="css/mySystem.css" />
</head>

注意保留你已经配置的BootsFaces_USE_VIEWPORT为false的参数，避免BootsFaces自动注入额外的head内容。

方式2：自定义JSF HeadRenderer #

如果不想手动引入资源，可以自定义HeadRenderer实现类，调整渲染逻辑，将X-UA-Compatible标签输出到所有资源的最前面。

以上任意方案都可以实现让IE以IE9及以上的文档模式渲染页面。

内容的提问来源于stack exchange，提问作者rui