`

META中X-UA-Compatible的用法

 
阅读更多

转:http://wenrunchang123.iteye.com/blog/1397507

 

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

 

         这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式,以此来解决部分兼容问题,例如模拟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进行渲染,只需要在该页面的地址前加上 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" cotent = "IE=edge,chrome=1"/>

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

 

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

 

Xml代码   收藏代码
  1. <IfModule mod_setenvif.c>  
  2. <IfModule mod_headers.c>  
  3. BrowserMatch chromeframe gcf  
  4. Header append X-UA-Compatible "chrome=1env=gcf  
  5. </IfModule >  
  6. </IfModule >   
 
在IIS7或者更高版本的服务器中,只需要修改web.config文件,添加如下信息即可即可:

 

Xml代码   收藏代码
  1. <span style="color: #000000;">< configuration >  
  2. < system.webServer >  
  3. < httpProtocol >  
  4. < customHeaders >  
  5. < add name = "X-UA-Compatible" value = "chrome=1" />  
  6. </ customHeaders >  
  7. </ httpProtocol >  
  8. </ system.webServer >  
  9. </ configuration ></span>   
分享到:
评论

相关推荐

    一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    &lt;meta http-equiv=X-UA-Compatible content=IE=EmulateIE7&gt; 百度一下,你就知道 &lt;/title&gt; &lt;script&gt;var wpo={start:new Date*1,pid:109,page:‘superpage’} &lt;meta http-equiv=X-UA-Compatible content=IE=...

    HTML5中meta属性的使用方法

    meta属性在HTML中占据了很重要的位置。如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等。...meta http-equiv=X-UA-Compatible content=IE=edge /&gt; 指示IE以目前可用的最高模式显示内容

    【JavaScript源代码】Vue验证用户名是否可用的方法.docx

    DOCTYPE html&gt;  &lt;html lang="en"&gt;  &lt;head&gt;   &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;   &lt;meta name="viewport" content="width=device-widt

    modern-hta:在HTML应用程序中运行现代代码

    meta http-equiv =" x-ua-compatible " content =" ie=11 " &gt; &lt; script src =" https://unpkg.com/modern-hta " &gt; import $ from './$.mjs' import data from './data.json' log ( `Hello World` ) &lt...

    解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常

    meta http-equiv=”X-UA-Compatible” content=”IE=7″ /&gt;或者&lt;meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ /&gt;就可以解决,实际测试根本没有效果,原来是在ScrollPic.js里有个css...

    Vue.js框架路由使用方法实例详解

    meta http-equiv=X-UA-Compatible content=IE=edge&gt; &lt;meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'&gt; &lt;link href=...

    bootstrap输入框组使用方法

    meta http-equiv=X-UA-Compatible content=IE=edge&gt; &lt;meta name=viewport content=width=device-width, initial-scale=1&gt; &lt;title&gt;Bootstrap&lt;/title&gt; &lt;link rel=stylesheet href=css/...

    Vue入门之animate过渡动画效果

    简介: transition方法的使用 transition内置方法 transition-group  animate库实现过渡动画 ...meta http-equiv=X-UA-Compatible content=ie=edge&gt; &lt;title&gt;Document&lt;/title&gt; &lt;sc

    Vue.js标签页组件使用方法详解

    本文实例为大家分享了Vue.js标签页组件使用的具体代码,供大家参考,具体内容如下 ...meta http-equiv=X-UA-Compatible content=ie=edge&gt; &lt;title&gt;标签页组件&lt;/title&gt; &lt;link rel=stylesheet t

    js 图片转base64的方式(两种)

    方式一:Blob和FileReader 对象 实现原理: 使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = “blob”] 使用FileReader 对象接收blob ...meta http-equiv=X-UA-Compatible content=ie=ed

    js调用设备摄像头的方法

    本文实例为大家分享了js调用设备摄像头的具体代码,供大家参考,具体内容如下 使用getUserMedia这个API来获取摄像头的权限 兼容chrome和火狐,IOS不兼容 ...meta http-equiv=X-UA-Compatible content=ie=edge /&gt;

    leizm-html-parser:用纯JavaScript编写的快速HTML解析器

    安装 ...用法 Node.js或Webpack ... ...!...meta charset="UTF-8"&gt;...meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;...meta http-equiv="X-UA-Compatible" content="ie=edge"&gt; &lt;title

    Vue.js下拉菜单组件使用方法详解

    本文实例为大家分享了Vue.js下拉菜单组件的具体实现代码,供大家参考,具体内容如下 ...meta http-equiv=X-UA-Compatible content=ie=edge&gt; &lt;title&gt;可从外部关闭的下拉菜单&lt;/title&gt; &lt;link rel=

    关于layui导航栏不展示下拉列表的解决方法

    在使用导航栏时下拉列表不展示 没有下拉效果是这样的 经过修改后就解决了: 具体原因是没有导入:layui/layui.js 我的jsp代码是这样的:...meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1&gt; &lt;meta htt

    head-it:简单的“头”界面

    meta http-equiv="x-ua-compatible" content="ie=edge"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;title&gt;Page Title&lt;/title&gt; */ 命令行界面 $ npm install --...

    Bootstrap表单控件使用方法详解

    表单作为Bootstrap的核心内容,...meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;!-- 移动设备优先 --&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;!--

    AngularJS监听路由变化的方法

    使用AngularJS时,当路由发生...meta http-equiv=X-UA-Compatible content=IE=edge&gt; &lt;title&gt;AngularJS监听路由变化&lt;/title&gt; &lt;/head&gt; &lt;body ng-app=ngRouteExample&gt; &lt;div id=navigation&gt;

    JavaScript tab选项卡插件实例代码

    今天,先从最简单的开始,将已有的一个Tab选项卡切换功能改写成javascript插件形式。 原生函数写法 ...meta http-equiv=X-UA-Compatible content=IE=edge&gt; &lt;meta name=viewport content=width=device-wid

    jQuery插件DataTable使用方法详解(.Net平台)

    上一篇随笔提到了MvcPager,最近用到了一款前端JQ插件——DataTable(简称DT),很好用。 DT是一款前端插件,和后端完全...meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt;meta name="viewport

    利用css3实现进度条效果及动态添加百分比

    项目过程中,开始使用了js的requestAnimationFrame方法实现进度条,但是在数据超级多的时候非常影响性能,如此改用css去实现,优化。 先贴代码: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;...

Global site tag (gtag.js) - Google Analytics