【转】使用Chrome Frame,彻底解决浏览器兼容问题「建议收藏」

【转】使用Chrome Frame,彻底解决浏览器兼容问题「建议收藏」本文转自http://www.ryanbay.com/?p=269,感谢该作者的总结 X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置。在网页中指定的模式优先权高于服务器中(通过HTTPHeader)所指定的模式。兼容性模式设置优先级: metatag>…

大家好,又见面了,我是你们的朋友全栈君。

本文转自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浏览器上了。

【转】使用Chrome Frame,彻底解决浏览器兼容问题「建议收藏」

但并非你的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.proxy.ustclug.org/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中已经做了浏览器的判断。

【转】使用Chrome Frame,彻底解决浏览器兼容问题「建议收藏」

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的参考资料:

文章乃参考、转载其他博客所得,仅供自己学习作笔记使用!!!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/160308.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Redis连接时报错:Could not connect to Redis at 127.0.0.1:6379: Connection refused「建议收藏」

    Redis连接时报错:Could not connect to Redis at 127.0.0.1:6379: Connection refused「建议收藏」在安装好redis扩展尝试连接redis时,客户端打不开,原因是需要先开启服务端,这需要先配置redis.conf1.找到redis.conf并修改daemonizeno为daemonizeyes,这样就可以默认启动就后台运行2.使用配置开启redis服务redis-server/usr/local/redis-5.0.53.连接使用redisr…

  • ASP.net Session原理「建议收藏」

    ASP.net Session原理「建议收藏」1.创建SessionMgr类usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;//////SessionMgr的摘要说明///publicclassSessionMgr{privatestaticIDiction

  • Rabbitmq安装_rabbitmq 配置

    Rabbitmq安装_rabbitmq 配置RabbitMQ服务器如何安装?RabbitMQ是一个AMQP(AdvancedMessageQueue,即高级消息队列协议)服务器。下载地址: RabbitMQ下载安装说明:各

  • PDAF(相位对焦)的基本原理

    PDAF(相位对焦)的基本原理今天来讲一讲PDAF(相位对焦)的基本原理。 在自动对焦的时候总是有一个困惑,知道图像是不清楚的,但是lens应该向前还是向后移动呢?总是要前后移动lens一下才知道,普通的反差法对焦就是这么做的,爬山嘛。PDAF的出现就是为了解决这个lens移动的问题,可以根据图像,预判lens运动的方向。PDAF最早运用在单反上,已经是非常成熟的技术了,原理如下图。左图为CCD在焦后的情况,…

  • 2022年Redis最新面试题第6篇 – Redis淘汰策略「建议收藏」

    2022年Redis最新面试题第6篇 – Redis淘汰策略「建议收藏」Redis过期键的删除策略?出现概率:★★★★Redis过期键的删除策略是:定期删除+惰性删除。1)、关于定期删除,Redis默认会每隔100ms就随机选取一些已经过期了的key,检查其是否过期,如果已经过期就删除。不过假设Redis里放了100w个key,而且都设置了过期时间,你每隔几百毫秒,就检查100w个key,那Redis基本上就卡死了,cpu负载也会很高的,基本都消耗在检查过期key上了。注意,这里可不是每隔100ms就遍历所有的设置过期时间的key,那样就是一场性能上的灾难。实际情况是每

    2022年10月21日
  • pycharm 导包_PyCharm入门教程——自动导入(上)

    pycharm 导包_PyCharm入门教程——自动导入(上)当你引用还没有导入的类时,PyCharm会帮助你找到此文件并将其添加到导入列表中。你可以导入单个类或整个包,具体取决于你如何设置。import语句将添加到imports部分,但插入符号不会从当前位置移动,并且你当前的编辑会话不会挂起。此功能称为ImportAssistant(导入助手)。使用ImportAssistant是处理PyCharm中导入的首选方法,因为命令行不支持导入优化。此功…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号