IE兼容问题解决方案——指定文件兼容性为content="IE=Edge,chrome=1"(可以解决很多的问题)

引言

偶尔做些坑爹的国企项目或者政府的web项目总是遇到一个坑爹的问题,就是要兼容IE,哪怕微软自己都抛弃IE了那些国企政府机构的老机器还是跑IE,然后经过一番协调一般会指定一个版本至少兼容某个版本以上,然而一般我们都是希望能够使用一些新特性,比如html5,最好是兼容谷歌,这样就十分有利于我们开发者了

解决方案

利用文件兼容性定义让IE如何去编译你的网页,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式,便是在meta信息中指定,以下是几种指定方法:

<meta http-equiv="X-UA-Compatible" content="IE=7">  
#以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。  
<meta http-equiv="X-UA-Compatible" content="IE=8">  
#以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。  
<meta http-equiv="X-UA-Compatible" content="IE=edge">  
#以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。  
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">  
<meta http-equiv="X-UA-Compatible" content="IE=7,9">  
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
#以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.

而让IE能够兼容谷歌的方法便是这句

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

解析

chrome=1 这个并不是IE模拟chrome,而是谷歌自己做的一个外挂:Google Chrome Frame(谷歌内嵌浏览器框架GCF)。这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器

要使用chrome=1,要安装GCF,并且指定页面使用chrome内核来渲染。


GCF下载地址: http://code.google.com/intl/zh-CN/chrome/chromeframe/

安装完成后,如果你想对某个页面使用GCF进行渲染,只需要在该页面的地址前加上 gcf: 即可,例如: gcf:http://www.baidu.com


但是如果想要在开发时指定页面默认首先使用GCF进行渲染,如果未安装GCF再使用IE内核进行渲染,该如何进行呢?
就是使用这个标记。
但是如果想要在开发时指定页面默认首先使用GCF进行渲染,如果未安装GCF再使用IE内核进行渲染,
http-equiv=”X-UA-Compatible”这个是IE8的专用标记,是用来指定Internet Explorer 8 浏览器模拟某个特定版本IE浏览器的渲染方式,以此来解决IE浏览器的兼容问题。


例如指定IE8浏览器使用IE6的渲染方式呈现界面。
曾经css hacker常用的模拟IE7渲染方式的代码:

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

IE=edge 这个就是另外一种解决方案了,这个需要IE版本比较高,因为这个是意思是使用微软的edge浏览器的内核去渲染界面了,而这个并不需要安装特别的插件
官方对edge的定义:

  • 可使用开放式网络技术(如 HTML5 canvas 标记)立即启动,甚至包括 Internet Explorer 6、7 或 8 尚不支持的技术。
  • 利用 JavaScript 性能增强功能,使应用程序速度更快,响应更灵敏。
    所以这段代码则可以解释为:如果安装了GCF,则使用GCF来渲染页面「”chrome=1”」,如果没有安装GCF,则使用最高版本的IE内核进行渲染「”IE=edge”」。

还有一个问题就是如何通过w3.org的html5验证工具

http-equiv = "X-UA-Compatible"

在w3c的协议里面没有http-equiv = “X-UA-Compatible”这个值,所以在一部分界面可能通不过
这个的解决方案是在服务器端配置http equiv规则
以下是针对几种主流服务器的配置方案

apache服务器,确保 mod_headers 和 mod_setenvif 是available的,然后在httpd.conf「新版Apache的配置文件是 apache2.conf」或者在.htaccess中加入以下规则:

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

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


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

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

add_header "X-UA-Compatible" "IE=Edge, chrome=1";
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值