`

content = "IE=edge,chrome=1" 详解

阅读更多

【前言】

    今天看到一个问题,在网页中设置X-UA-Compatible为IE=edge,chrome=1就不用兼容IE低版本了吗?

    在网页中使用这段代码

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

   是不是就不用考虑IE6,7,8了呢,只用在IE=edge和chrome浏览器下调试就OK了?

 

 

【概论】

  (1) Edge 模式告诉 IE 以最高级模式渲染文档,也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染,避免版本升级造成的影响。简单的说,就是什么版本 IE 就用什么版本的标准模式渲染

  (2)chrome=1 强制 IE 使用 Chrome Frame 渲染

   这段代码则可以解释为:如果安装了GCF,则使用GCF来渲染页面「”chrome=1″」,如果没有安装GCF,则使用最高版本的IE内核进行渲染「”IE=edge”」

 

【主体】

 

<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,而是谷歌做了个外挂GCF: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.最基本的用法:在页面的头部加入

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

 

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

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

 

 

 

 

 

 

 

 

 

.

分享到:
评论

相关推荐

    IE=edge,chrome=1的META信息详解

    meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″&gt; 但令我好奇的是,此处这个标记后面竟然出现了chrome这样的值,难道IE也可以模拟chrome了? 迅速搜索了一下,才明白原来不是微软增强了IE,...

    html中标签meta的详细使用方法和作用

    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/&gt; ``` - **解释**: - `IE=edge`:告诉IE使用最新的渲染引擎(即IE浏览器本身的最新版本)。 - `chrome=1`:如果页面检测到已安装GCF,则使用...

    各主流浏览器CSS HACK列表

    - **`&lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;`**: - **用途**:使IE浏览器以最高版本渲染页面。 - **示例**: ```html &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=...

    详解vue 兼容IE报错解决方案

    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; ``` 3. 修改webpack配置 如果使用了element-ui、v-charts等第三方UI框架或插件,这些库可能底层使用了ES6语法。在webpack.base.conf.js文件中...

    vue组件命名和props命名代码详解

    meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1&gt; &lt;title&gt;Examples&lt;/title&gt; [removed][removed] &lt;/head&gt; &lt;body&gt; &lt;div id=app&gt; &lt;!-- post-title使用驼峰命名postTitle会...

    关于IE8兼容:X-UA-Compatible属性的解释

    &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"&gt; ``` 这将激活Google Chrome Frame插件,如果用户已经安装了这个插件,那么在支持的IE版本中,页面将使用Chrome的渲染引擎。这样可以提高某些旧版...

    详解Vue.js v-for不支持IE9的解决方法

    最近一个小项目,在最后的测试阶段出现了问题,使用了Vue,在Chrome、Firefox、Safari、IE11下都可以访问,唯独IE9下无法正常显示,排除程序问题后,最终判断是...meta http-equiv="X-UA-Compatible" content="IE=edge

    Bootstrap使用基础教程详解

    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;!-- 引入Bootstrap --&gt; &lt;title&gt;Bootstrap模板样式 &lt;link href="css...

    bootstrap学习笔记

    3. **卓越的兼容性**:Bootstrap支持多种浏览器,包括最新的Chrome、Firefox、Safari、Edge以及较旧版本的IE浏览器。 4. **响应式设计**:能够自动适应不同设备的屏幕尺寸,无论是桌面、平板还是手机,都能呈现出...

    wangEditor-轻量级web富文本编辑器-兼容pc 移动等多平台

    - **兼容性**:它支持IE10及以上的浏览器,以及主流的Chrome、Firefox、Safari和Edge,确保了在各种环境下都能正常工作。 - **易用性**:配置和使用简单,API清晰,开发者可以快速上手。 - **富文本编辑**:提供常见...

    去浏览器滚动条代码

    - **对于其他浏览器**:现代浏览器如Chrome、Firefox、Safari和Edge等都支持上述CSS代码。但需要注意的是,在某些情况下,隐藏滚动条可能会导致页面内容不可见,因此在使用此技术时应谨慎考虑用户体验。 #### 五、...

    pignosetabjs是一款响应快速且易于使用的jQueryTabs选项卡插件

    Pignose Tab JS 兼容现代浏览器,包括 Chrome、Firefox、Safari、Edge 和 IE9 及以上版本。同时,由于依赖 jQuery,因此需要确保项目中已经引入了 jQuery 库。此外,为了实现更好的移动设备支持,建议结合使用其他...

    jquery的EasyTabs的js+demo

    EasyTabs 对主流浏览器有较好的兼容性,包括Chrome、Firefox、Safari、Edge和IE9及以上版本。为了提高性能,可以在初始化时指定`animate`选项为`false`,禁用动画效果。 总结,jQuery EasyTabs 是一个简单易用的...

    jsScrolling 多彩网页滚动条插件附实例打包.zip

    5. **兼容性广泛**:兼容主流的现代浏览器,包括Chrome、Firefox、Safari、Edge和IE10+。 ### 2. 使用步骤 1. **引入文件**:首先在HTML文件中引入`jsScrolling`的JavaScript和CSS文件。通常放置在`&lt;head&gt;`标签内...

    轻量富文本编辑器wangEditor集成源码

    它支持多种浏览器环境,包括Chrome、Firefox、Safari、Edge以及IE9及以上版本。编辑器提供了多种格式化文本的功能,如字体、字号、颜色、列表、表格等,还支持图片上传、代码高亮、公式编辑等高级特性。 ### 二、...

    layer弹出层插件

    它支持多种浏览器,包括Chrome、Firefox、Safari、Edge以及IE8及以上版本,确保了良好的跨平台兼容性。 ### 1. 基本使用 layer的使用非常简单,只需要引入对应的CSS和JS文件,然后通过JavaScript调用相应的方法...

    Flask之请求钩子的实现

    response.headers['X-UA-Compatible'] = 'IE=Edge,chrome=1' return response ``` **内部实现原理**: - Flask同样使用一个字典来存储这些函数,字典的结构与 `before_request` 类似。 - 函数通过 `after_request...

    jsam-paginationjs分页插件.zip

    5. **兼容性好**:兼容主流浏览器,包括Chrome、Firefox、Safari、Edge及IE9及以上版本。 **配置参数** 1. **total**: 总记录数,用于计算总页数。 2. **perPage**: 每页显示的记录数。 3. **currentPage**: 当前...

Global site tag (gtag.js) - Google Analytics