【转】使用Chrome Frame,彻底解决浏览器兼容问题
本文转自http://www.ryanbay.com/?p=269,感谢该作者的总结
X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。 通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置。
在网页中指定的模式优先权高于服务器中(通过HTTP Header)所指定的模式。 兼容性模式设置优先级:
meta tag > http header
meta tag > http header |
常用的例子:
<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一直存在的兼容问题给予一个解决办法,可以考虑在工作中使用。
以下是正文,为方便oser阅读,原文抄录如下,有关具体情况请参考原作者。
Google Chrome Frame,谷歌浏览器内嵌框架(简称GCF),是一个使你机器上的Internet Explorer系列浏览器鸟枪换炮,用上webkit内核的Chrome引擎,但IE浏览器外观上还是IE的外观的免费插件。
不相信吗?使用用IE浏览器打开GCF安装页,按照提示安装后,重启IE,再打开gcf:about:version,现在你会看到chrome浏览器的内核信息,说明Chrome内核已经植根于你的IE浏览器上了。
但并非你的IE访问任意网页就会自动的使用Chrome内核来解析,需要两种方式:一是在网址前面加上”gcf:“,比如gcf:http://gmail.com来访问;二是在网页的meta信息中加入一句:
<meta http-equiv="X-UA-Compatible" content="chrome=1">
这里chrome=1代表所有版本的IE浏览器都使用Chrome内核解析网页,chrome属性还有其他的值,比如chrome=IE7,代表IE7或以下版本的浏览器才使用chrome内核,chrome=IE6和chrome=IE8等依此类推。
作为一个网页开发者,你会不会想到有了这个插件,以后就可以大胆使用各种CSS3样式,只要Chrome下显示正确,IE下也能显示正确了!没错!但前提是用户会安装这个插件吗?如何提供一个友好的引导安装界面呢,Google帮我们解决了这个问题。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script> <div id="prompt"></div> <script> window.attachEvent("onload", function() { CFInstall.check({ mode: "overlay", node: "prompt" }); }); </script>
在body标签中加入这段js代码,可以使得IE打开该网页时出现友好的GCF安装引导iframe框。这段代码不需要存在于
<!--[if IE]>...<![endif]-->
之中,js中已经做了浏览器的判断。
CFInstall.min.js是官方提供的文件,CFInstall.check()方法有许多可选项,其中包括:
- mode: “inline” 默认值,GCF安装引导的iframe结构将存在于node选项指定id的元素中最前面位置,属于文档流的一部分
- mode: “overlay” 该iframe以弹出层显示,弹出层将会在页面可视范围内居中
- mode: “popup” 该iframe以新开窗口/选项卡显示,类似于target:_blank的效果
- node: “” 指定iframe结构的dom结点位置,在mode:”inline”下有效
- url: “” 点击安装按钮跳转到的链接地址,默认为GCF安装文件地址
- destination: “” GCF安装完成后页面跳转到的链接地址
- className: “” 在mode:”inline”下对iframe指定新的class名,美化iframe界面时很有用,默认的class为chromeFrameInstallDefaultStyle
OK,了解了这么多,相信你已经跃跃欲试了,我在我的博客上开启了chrome=IE8并加上了GCF的友好安装指引,欢迎访问比较IE下和Chrome下的渲染差异。
更多GCF的参考资料:
- 官方开发者文档:http://www.chromium.org/developers/how-tos/chrome-frame-getting-started
- html5rocks的补充介绍:http://www.html5rocks.com/en/tutorials/google-chrome-frame/
- Chrome与GCF的渲染差异:http://www.chromium.org/developers/how-tos/chrome-frame-getting-started/differences-between-chrome-and-chrome-frame
- from:https://www.oschina.net/question/208081_89397
【转】使用Chrome Frame,彻底解决浏览器兼容问题的更多相关文章
- IE内嵌google chrome frame解决浏览器兼容问题
IE内嵌google chrome frame解决浏览器兼容问题 http://www.cnblogs.com/xwdreamer/archive/2013/12/17/3477776.html 参 ...
- 【转】IE内嵌google chrome frame解决浏览器兼容问题
参考文献: http://www.pseudowired.com/2012/12/04/tomcat-http-header-manipulation/(html中自动添加使用chrome的heade ...
- js复制当前url地址解决浏览器兼容
1.网上搜索的js复制链接代码,好像只能支持ie浏览器,其他浏览器不支持, 案例: var url=12; if(window.clipboardData){ wi ...
- 教你一招解决浏览器兼容问题(PostCSS的使用)
我们在处理网页的时候,往往会遇到兼容性的问题.在这个问题上分为两个大的方向:屏幕自适应&浏览器兼容.而屏幕自使用的方法有许多,包括框架之类的,但是浏览器的兼容却没有一个号的框架.在我们日常处理 ...
- 解决浏览器兼容ES6特性
为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...
- vue cli创建的项目 当你后期使用了ES6语法,如何解决浏览器兼容问题
最近开发了一个项目,开发过程中,由于需要使用了async await ,于是发现,只有少数的浏览器支持,极大多数的浏览器是不支持这玩意的,在网上各种找解决方案,基本都是失败,最后总结了两个方案之后,尝 ...
- 在不同的浏览器使用不同的css样式,解决浏览器兼容问题
区别IE6与FF: background:orange; *background:blue; 区别IE6与IE7: background:green !import ...
- 解决浏览器兼容问题的css hack
原理 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS.CSS Hack大致有3种表现形式,CSS类内部Hack.选择 ...
- 关于浏览器兼容问题及hack写法
浏览器的兼容问题 1.浏览器内核: Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( ...
随机推荐
- MSSQL标识ID的修改
今天机缘巧合,无意听到别人闲聊,突发奇想设计一套系统来解决他们的痛点,待我进一步分析下如何执行.回到主题,最近修改ID的工作做了不少.企业补充历史数据用.现总结如下: 1.想把递增ID某一段的ID都加 ...
- SQL 拼接多个字段的值&一个字段多条记录的拼接
如student表: studentID studentName studentScore 01 Alice 90 02 Bill 95 03 Cindy 100 一.拼接多个字段的值 select ...
- [小技巧]Filezilla无法确定拖放操作目标,由于shell未正确安装__解决办法
重装系统及相关软件之后,用filezilla拖拽ftp上的文件到桌面的时候,提示"无法确定拖放操作目标......" 解决办法很简单,执行如下几步就OK了 ①在CMD中,进入Fil ...
- 字符串按首字母分组并ToDictionary的实现
这是一道面试题目,要求实现字符串按首字母分组并ToDictionary输出,当时没有做出来,后面研究了一下,现在将这道题的几种实现方式记录下来. 首先初始化数据源,是一个List<string& ...
- CodeForces822A
A. I'm bored with life time limit per test 1 second memory limit per test 256 megabytes input standa ...
- PHP实现大转盘抽奖算法
流程: 1.拼装奖项数组,2.计算概率,3.返回中奖情况 代码如下:中奖概率 ' v ' 可以在后台设置,传到此方法中,注意传整数 function get_gift(){ //拼装奖项数组 // 奖 ...
- js-redux学习笔记
1.action creator 就是函数,负责构建一个 action (是的,action creator 这个名字已经很明显了)并返回它. var actionCreator = function ...
- npm install、npm init、npm update、npm uninstall和package.json
npm install 安装本地包 npm install <package_name>:这个命令将在当前目录中创建node_modules目录(如果尚不存在),并将该软件包下载到该目录. ...
- 学习笔记(3)——实验室集群WMS服务配置
1.启动mgt结点的tomcat服务: [root@mgt zmq]# /home/geohpc/softwares/apache-tomcat-/bin/startup.sh 关闭为 [root@m ...
- linux安装activemq
ActiveMQ是由Apache出品的,一款最流行的,能力强劲的开源消息总线.ActiveMQ是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现,它非常快速,支持多种语言 ...