关于 HTTP meta 的 IE=edge,chrome=1 说明

转载出处: http://lightcss.com/add-x-ua-compatible-meta-to-your-website/

                  http://www.oschina.net/question/54100_17414


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

介绍:

这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式(比如人见人烦的IE6),以此来解决部分兼容问题,例如模拟IE7的具体方式如下:

 

<  meta  http-equiv  =  "X-UA-Compatible"  content  =  "IE=EmulateIE7"  />

但令我好奇的是,此处这个标记后面竟然出现了chrome这样的值,难道IE也可以模拟chrome了?
迅速搜索了一下,才明白原来不是微软增强了IE,而是谷歌做了个外挂:Google Chrome Frame(谷歌内嵌浏览器框架GCF)。这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器,谷歌这个墙角挖的真给力!
而上文提到的那个meta标记,则是在是安装了GCF后,用来指定页面使用chrome内核来渲染。
GCF下载地址: http://code.google.com/intl/zh-CN/chrome/chromeframe/
安装完成后,如果你想对某个页面使用GCF进行渲染,只需要在该页面的地址前加上 gcf: 即可,例如: gcf:http://cooleep.com
但是如果想要在开发时指定页面默认首先使用GCF进行渲染,如果未安装GCF再使用IE内核进行渲染,该如何进行呢?
就是使用这个标记。

标记用法:

阅读了下chrome的开发文档(http://www.chromium.org/developers/how-tos/chrome-frame-getting-started,需翻墙),下面来简单讲解一下这个标记的语法。
1.最基本的用法:在页面的头部加入

 

<  meta  http-equiv  =  "X-UA-Compatible"  content  =  "chrome=1"  >

用以声明当前页面用chrome内核来渲染。

复杂一些的就是本文一开始看到的那中用法:

 

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

这样写可以达到的效果是如果安装了GCF,则使用GCF来渲染页面,如果为安装GCF,则使用最高版本的IE内核进行渲染。


2.通过修改HTTP头文件的方法来实现让指定的页面使用GCF内核进行渲染:
在HTTP的头文件中加入以下信息:X-UA-Compatible: chrome=1
在Apache服务器中,确保 mod_headers 和 mod_setenvif文件可用,然后在httpd.conf中加入以下配置信息:

 

<  IfModule  mod_setenvif.c>
    <  IfModule  mod_headers.c>
      BrowserMatch chromeframe gcf
      Header append X-UA-Compatible "chrome=1" env=gcf
    </  IfModule  >
</  IfModule  >

在IIS7或者更高版本的服务器中,只需要修改web.config文件,添加如下信息即可即可:

<  configuration  >
    <  system.webServer  >
       <  httpProtocol  >
          <  customHeaders  >
             <  add  name  =  "X-UA-Compatible"  value  =  "chrome=1"  />
          </  customHeaders  >
       </  httpProtocol  >
    </  system.webServer  >
</  configuration  >


在Nginx服务器中,只需要 找到\nginx\conf\nginx.conf并编辑,在server { }区域里(最好是闭合符前面起一行)添加下列代码即可:

add_header "X-UA-Compatible" "IE=Edge, chrome=1";
<think>嗯,用户想了解如何正确配置`<meta>`标签中的`X-UA-Compatible`和`IE=edge,chrome=1`的作用以及兼容性问题。首先,我需要回忆一下这些设置的具体用途。记得X-UA-Compatible是IE8引入的,用来指定文档模式,而`IE=edge`是告诉IE使用最新引擎渲染。至于`chrome=1`,可能和Google Chrome Frame插件有关,但那个插件现在可能已经停止维护了。 接下来,要确保回答符合用户提到的引用内容。比如,引用2提到X-UA-Compatible是IE8及以上才支持的,所以需要指出旧版浏览器会忽略这个设置。同时,引用4解释了不同值的含义,比如`IE=EmulateIE7`,但用户主要关注的是`IE=edge`和`chrome=1`。 然后,正确的配置格式是什么?引用3和引用4给出了一些例子,比如`<meta http-equiv="X-UA-Compatible" content="IE=edge">`和加上`chrome=1`的情况。需要注意的是,`chrome=1`需要用户安装了GCF才会生效,但现在GCF已经不更新了,所以可能实际作用有限。 兼容性问题方面,需要提到不同IE版本的行为差异,比如IE8到IE11对`IE=edge`的支持,以及Edge浏览器不再支持这个标签。同时,旧版浏览器可能忽略这个设置,所以需要其他兼容性处理。 常见误区部分,用户可能会混淆`IE=edge`和`chrome=1`的作用,需要分别解释。此外,强调必须放在`<head>`顶部,否则可能不起作用,这点引用中也提到过。 最后,生成相关问题时要围绕配置作用、兼容模式选择、现代浏览器影响、GCF作用以及常见错误等方面提问。确保问题覆盖用户可能进一步关心的点。</think>### 如何正确配置`X-UA-Compatible`和兼容性问题 #### 1. `X-UA-Compatible`的作用 - **指定IE浏览器的渲染模式**:`X-UA-Compatible`是IE8及以上版本引入的HTTP头部或`<meta>`标签属性,用于强制浏览器以特定引擎渲染页面。例如: - `IE=edge`:要求浏览器使用最新支持的文档模式(如IE11使用Edge模式)[^2][^3]。 - `IE=EmulateIE7`:以IE7标准模式渲染[^4]。 - **解决兼容性问题**:避免旧版IE因默认渲染模式导致页面显示异常。 #### 2. `chrome=1`的作用 - **激活Google Chrome Frame(GCF)**:若用户安装了GCF插件,`chrome=1`会触发IE使用Chrome内核渲染页面。但需注意: - **GCF已停止维护**:自2014年起不再更新,现代场景中作用有限。 #### 3. 正确配置方法 在HTML的`<head>`标签**最顶部**添加以下代码: ```html <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> ``` - **关键点**: - 必须优先于其他`<meta>`标签和CSS/JS引用[^3]。 - 若通过HTTP头部设置(如Apache配置),优先级高于`<meta>`标签。 #### 4. 兼容性影响分析 | 浏览器/版本 | 行为说明 | |---------------------|--------------------------------------------------------------------------| | IE8-IE11 | 遵循`IE=edge`,使用最新文档模式 | | Edge浏览器 | 忽略此标签(默认使用EdgeHTML/Chromium引擎) | | 旧版非IE浏览器 | 直接忽略此标签 | #### 5. 常见误区 - **`chrome=1`并非万能**:依赖已废弃的GCF插件,现代环境中可省略。 - **模式冲突**:若服务器同时设置HTTP头部和`<meta>`标签,以HTTP头部为准[^2]。 - **顺序重要性**:未置于`<head>`顶部时可能导致IE触发兼容性视图模式。 #### 6. 现代替代方案 - 使用标准HTML5文档类型:`<!DOCTYPE html>`。 - 通过CSS重置和渐进增强策略适配多浏览器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值