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

20 篇文章 1 订阅

< 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";

-------------------------------------------------------------------------------------------------
x-ua-compatible 用来指定IE浏览器解析编译页面的model
 
x-ua-compatible 头标签大小写不敏感,必须用在 head 中,必须在除 title 外的其他 meta 之前使用。
1、使用一行代码来指定浏览器使用特定的文档模式。
<meta http-equiv="x-ua-compatible" content="IE=9" >
<meta http-equiv="x-ua-compatible" content="IE=8" >
<meta http-equiv="x-ua-compatible" content="IE=7" >
 
2、在一些情况下,我们需要限定浏览器对文档的解析到某一特定版本,或者将浏览器限定到一些旧版本的表现中。可以用如下的方式:
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" >
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" >
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" >
 
使用这种写法,浏览器或者使用标准模式进行解析,或者使用 IE5 Quirks 模式进行解析。
 
3、为了测试,我们也可以使用下面的语句指定浏览器按照最高的标准模式解析页面。
<meta http-equiv="x-ua-compatible" content="IE=edge" >
 
4、多个模式的指定。我们可以用逗号分割多个版本,这种情况下,浏览器会从这个列表中选择一个他所支持的最高版本来使用标准模式进行渲染。如下面的例子,在IE8进行浏览时,将会使用IE7的标准模式进行渲染,因为他本身不支持IE9和IE10。
<meta http-equiv="x-ua-compatible" content="IE=7,9,10" >

 

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

     在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案

百度也应用了这种方案去解决IE的兼容问题

百度源代码如下

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml>
<head>
<meta http-equiv=Content-Type content=“text/html;charset=utf-8″>
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>
<title>百度一下,你就知道 </title>
<script>var wpo={start:new Date*1,pid:109,page:‘superpage’}</script>
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>

可以打开百度,右键查看源码看下!我们可以看下文件头是否存在这样一行代码!

        这句话的意思是强制使用IE7模式来解析网页代码!

在这里送上几种IE使用模式!

<meta http-equiv=“X-UA-Compatible” content=“IE=8″>
2. Google Chrome Frame也可以让IE用上Chrome的引擎:  <meta http-equiv=“X-UA-Compatible” content=“chrome=1″ />

3.强制IE8使用IE7模式来解析    <meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7″><!– IE7 mode –>

//或者
<meta http-equiv=“X-UA-Compatible” content=“IE=7″><!– IE7 mode –>


4.强制IE8使用IE6或IE5模式来解析  :

<meta http-equiv=“X-UA-Compatible” content=“IE=6″><!– IE6 mode –> 

<meta http-equiv=“X-UA-Compatible” content=“IE=5″><!– IE5 mode –> 


5.如果一个特定版本的IE支持所要求的兼容性模式多于一种,如:

<meta http-equiv=“X-UA-Compatible” content=“IE=5; IE=8″ />


另外还有一起其他的解决方案,例如google的

       ie7 – js中是一个JavaScript库(解决IE与W3C标准的冲突的JS库),使微软的Internet Explorer的行为像一个Web标准兼容的浏览器,支持更多的W3C标准,支持CSS2、CSS3选择器。它修复了许多的HTML和CSS问题,并使 得透明PNG在IE5、IE6下正确显示。

使IE5,IE6兼容到IE7模式(推荐)

<!–[if lt IE 7]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js” type=”text/javascript”></script>
<![endif]–>


使IE5,IE6,IE7兼容到IE8模式

<!–[if lt IE 8]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”></script>
<![endif]–>


使IE5,IE6,IE7,IE8兼容到IE9模式

<!–[if lt IE 9]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
<![endif]–>


解决PNG显示问题

只需将透明png图片命名为*-trans.png

需要注意的是:此方法对背景平铺(background-repeat)和背景(background-position)无法起到任何作用,默认会占满整个容器。

--------------------===========================================----------------------------

IE对文档的解析模式及兼容性问题

       深入研究这个问题源于最近制作的几个页面,交给前端后,发现在IE8下,对于JS动态控制的内容,页面高度不能够随着动态的调整。
仔细检查后发现问题在于 display:inline-block 这个属性。
      inline-block 这个属性确实帮我们解决了不少问题,但是IE8在动态内容的渲染支持上,还是会有奇怪的问题。
     最后的解决方法是使用 x-ua-compatible ,来强制IE8使用IE7的模式来解析页面。下面是整理的一些相关的资料。
 
IE的文档模式
        Document Compatibility 决定了IE如何渲染你的页面,IE支持不同的 document (compatibility) mode。IE6之后的所有IE浏览器都支持以下几种模式:
      Standards mode:就是每个浏览器版本所提供的最新的功能,也是默认的模式;
      Quirks mode:这个模式强调兼容性超过标准( 影响可以看这里
      Almost-standards mode:这个模式支持最新标准的API,但是界面渲染还是遵循旧版本的标准。
 
    如果一个页面包含了 <!DOCTYPE> 标签,那么IE浏览器会按照标准模式进行解析。如果一个不包含 <!DOCTYPE> 的页面,IE浏览器使用 Quirks mode 来进行解析,这种情况下可能会有奇怪的事情发生。
 
     大多数时候,我们都使用标准的模式来指定文档模式。这样能够确保适应尽可能多的标准。
 
<!DOCTYPE html>
 
    有些时候,我们需要指定一些高版本的浏览器使用低版本的文档模式解析页面,这时我们可以使用  x-ua-compatible 头标签来实现。例如:
 
<html>
<head>
     <!-- Use Internet Explorer 9 Standards mode -->
     <meta http-equiv="x-ua-compatible" content="IE=9">
     <title>My Page</title>
</head>
<body>
     <p>Content goes here.</p>
</body>
</html>
 
上面这段代码,在不同的浏览器版本中,有不同的表现,如下表:
浏览器版本 结果 描述
Windows Store app或Windows UI中的浏览器 IE 10 标准模式 这是Windows Store app和Windows UI中唯一支持的模式
Internet Explorer for the Desktop 或者
Internet Explorer 9
IE9 标准模式 这正是x-ua-compatible指定的模式,而且浏览器支持这种模式
Internet Explorer 8 IE8 标准模式 因为浏览器不支持IE9标准模式,所以使用浏览器支持的最高标准模式
Internet Explorer 7, Internet Explorer 6 或者
Internet Explorer 5.5 for mac
IE5 (Quirks)模式 这些浏览器不支持这个标签头,并且网页中也没有指定<!DOCTYPE>
 
记住以下几个规则:
  • 如果页面指定了DOCTYPE并且也使用了x-ua-compatible标签,则x-ua-compatible标签将覆盖DOCTYPE
  • 如果浏览器支持x-ua-compatible标签,浏览器会使用他所支持的最高模式显示,则未必是标签指定的版本
  • 对于不支持x-ua-compatible标签的老版本浏览器,使用<!DOCTYPE>来决定文档模式
  • IE9和之前版本的浏览器,在遇到没有指定<!DOCTYPE>的页面时,使用IE5 Quirks模式解析文档,所以建议所有文档都要包含<!DOCTYPE>
      注意:所有版本的浏览器在解析 <!DOCTYPE html> 时,都会使用各自版本所支持的最高的标准模式来解析,所以推荐都是用HTML5的标记方式。IE9中,包含框架Frameset的页面,子页面的模式和父页面一致。但是在IE10中,可以分别指定。


  • 11
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值