【转】使用Chrome Frame,彻底解决浏览器兼容问题

本文转自http://www.cnblogs.com/xuan52rock/p/6735860.html,感谢该作者的总结

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,彻底解决浏览器兼容问题相关推荐

  1. IE内嵌google chrome frame解决浏览器兼容问题

    IE内嵌google chrome frame解决浏览器兼容问题 参考文章: (1)IE内嵌google chrome frame解决浏览器兼容问题 (2)https://www.cnblogs.co ...

  2. 【转】使用Chrome Frame,彻底解决浏览器兼容问题

    [转]使用Chrome Frame,彻底解决浏览器兼容问题 参考文章: (1)[转]使用Chrome Frame,彻底解决浏览器兼容问题 (2)https://www.cnblogs.com/xuan ...

  3. 解决浏览器兼容新问题

    转载地址:http://www.shuonar.com/blog/dc5faa22-aad8-437f-b9c9-f825f8051d77.html 最近发现我的主页(www.shuonar.com) ...

  4. javaScript解决浏览器兼容问题,判断浏览器是ie或者Chrome

    最近在写一个项目中遇到了一个问题,从java后台输出一段字符串,需要用到这个字符串,返回到页面上面. 假定该字符串为"" 在Chrome上得到的结果是<pre style= ...

  5. 20150909解决浏览器兼容问题

    1.解决IE9登录成功后,退出,重新刷新页面session里面还有值     原因是Ajax在第二次登录成功后,并没有执行退出的请求,直接从浏览器里面得到缓存的data返回值   $.ajaxSetu ...

  6. html div 子元素 过多 卡顿,CSS浏览器兼容

    如何解决浏览器兼容问题 各浏览器CSS hack兼容表: IE6IE7IE8FirefoxOperaSafari !importantYYYYY _Y *YY *+Y \9YYY \0Y nth-of ...

  7. html5 定义width不兼容,CSS-宽度自适应和浏览器兼容笔记

    自适应 宽度自适应:网页元素根据窗口或子元素自动调整宽度 适用百分比进行设置,例如:100% 铺满:50% 占据一般宽度 块元素如果不设置宽度,默认为100% 自适应中可以设置最大或者最小宽度和高度 ...

  8. CSS常见的浏览器兼容汇总

    CSS常见的浏览器兼容汇总 一.从浏览器内核的角度 来看,浏览器兼容性问题可分为以下三类: 1.渲染相关:和样式相关的问题,即体现在布局效果上的问题. 2.脚本相关:和脚本相关的问题,包括JavaSc ...

  9. 关于浏览器兼容问题及hack写法

    浏览器的兼容问题 1.浏览器内核: Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( ...

  10. 再谈ie浏览器兼容问题

    随着技术日新月异的发展,我以为已经可以完全甩掉ie浏览器,驰骋在新技术的海洋里.却不想,ie兼容问题如影随行. 当然,尝试解决ie浏览器兼容问题,并不代表我会去拥护它.我想做的只是为解决浏览器兼容提供 ...

最新文章

  1. 2019中职计算机大赛,2019年广西职业院校技能大赛中职组《计算机平面设计》赛项竞赛规程.pdf...
  2. Android--相对布局
  3. ORA-32004 参数设置过时的解决办法
  4. Val编程-文本操作
  5. 远程桌面最新漏洞CVE-2019-0708 POC利用复现
  6. 泛型系列3:获取泛型的类型
  7. Eclipse窗口显示:独立、嵌入式
  8. .net core在Linux下获取AD域信息
  9. 构造方法是静态还是非静态?
  10. ubuntu系统编译sh出错 默认dash不是bash
  11. Java Web学习总结(15)——JSP指令
  12. 【小技巧】自定义asp.net mvc的WebFormViewEngine修改默认的目录结构
  13. Kali Linux 软件源与更新源和更新命令
  14. WPF中监听剪贴板存在的Bug:OpenClipboard HRESULT:0x800401D0 (CLIPBRD_E_CANT_OPEN))错误
  15. Spring3第一天
  16. CPU HQ 什么意思
  17. GitHut上最受关注的Objective-C项目
  18. LBS服务LevelUp推二维码支付产品
  19. 什么是MTTF MTBF MTRF
  20. JAVA:日期时间范围查询0点到23点59分59秒之间

热门文章

  1. linux (centos 8.1)生产环境基于9台物理机 安装 opentstack ussuri集群以及集成ceph (已转gitee)
  2. SAP FI 系列 (022) - 货币和汇率的配置
  3. MindManager思维导图 PRDBRD写作方法与技巧 产品规划模板下载
  4. java8 新特性之 -- lamdba 表达式 -- Optional类 --遍历 Map List
  5. xamarin android 标签,Xamarin.Android使用教程:Android项目结构
  6. 重学数据结构:三对角矩阵公式推导过程
  7. 归并排序JAVA代码详解
  8. Qt:#pragma comment(lib,“ws2_32.lib“) 报错
  9. adobe黑体std能商用_请问Adobe 黑体 Std R能免费商用吗?
  10. ui设计移动端字体适配_22个在移动端UI设计中常用的英文设计字体