IE9兼容性视图与IE9标准视图
如果你使用的是IE9,那么按下F12键就会出现开发者工具,上面有两个下拉菜单:浏览器模式和文档模式。那么什么是浏览器模式?什么又是文档模式?二者有何区别?
浏览器模式用于切换IE针对该网页的默认文档模式、对不同版本浏览器的条件注释解析、以及发送给网站服务器的用户代理(User-Agent)字符串的值。网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版本和及安装的功能,这样就可以根据不同的浏览器返回不同的页面内容了。
文档模式用于指定IE的页面排版引擎(Trident)以哪个版本的方式来解析并渲染网页代码。切换文档模式会导致网页被刷新,但不会更改用户代理字符串中的版本号,也不会从服务器重新下载网页。切换浏览器模式的同时,浏览器也会自动切换到相应的文档模式。
一言以蔽之,浏览器模式会影响服务器端对客户端浏览器版本的判断,对条件注释也有影响;而文档模式会影响IE的排版引擎,对网页渲染会有影响,对CSS hack也会产生影响。因此,通过条件注释可以判断浏览器模式,而使用CSS hack可以判断文档模式。
如果我们使用一句简单的JavaScript语句来查看用户代理(User-Agent)字符串的值,则可以看到IE9兼容性视图与IE9的区别:
<script type="text/javascript"> alert('UA:'+navigator.userAgent); < /script>
输出结果如下所示,注意其中的MSIE版本号已经不同。判断浏览器模式就是判断User-Agent中的版本号,即MSIE后面的数值:
// IE9 UA:Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0)
// IE9 兼容性视图 UA:Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0)
话说IE9兼容性视图是模拟IE7的行为,那么IE9兼容性视图与IE7有没有区别呢?肯定是有区别的,即使是IE9中的IE7标准模式,与原生的IE7在渲染上也是有区别的,具体我们暂不去深究。
那么既然IE9兼容性视图的版本号跟IE7相同,如何才能判断当前是IE9兼容性视图,还是纯正的IE7呢?其实很简单,只需要判断浏览器的用户代理(User-Agent)字符串中是否包含Trident即可。首先检测MSIE的版本号是否为7.0,然后再判断是否含有Trident字串,若包含则为IE9兼容性视图,否则则为纯正的IE7。
小结:至此,你应该了解了什么是浏览器模式、什么是文档模式以及它们之间的区别了,另外还了解了IE9兼容性视图与IE9以及IE7的区别。
控制默认的渲染方式
当Internet Explorer 9遇到未包含X-UA-Compatible标头的网页时,它将使用<!DOCTYPE>指令来确定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型,则Internet Explorer 9将以IE5模式(怪异模式)来显示该网页。
如果<!DOCTYPE>指令指定了基于标准的文档类型,则Internet Explorer 9将以IE9模式显示该网页,但出现以下情况时除外:
- 为该网页启用了兼容性视图。
- 该网页是在Intranet区域中加载的,并且已将Internet Explorer 9配置为使用兼容性视图来显示Intranet区域中的网页。
- 已将Internet Explorer 9配置为使用兼容性视图来显示所有网站。
- 已将Internet Explorer 9配置为使用兼容性视图列表(其实是个黑名单,其中指定了一组始终使用兼容性视图显示的网站)。
- 已使用开发人员工具覆盖在该网页中指定的设置。
- 该网页遇到了页面布局错误,并且已将Internet Explorer 9配置为,通过在兼容性视图中重新打开网页来自动从此类错误中恢复。
此外,可以使用下面的注册表项来控制Internet Explorer对未包含X-UA-Compatible标头的页面的处理方式。
HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER) SOFTWARE Microsoft Internet Explorer Main FeatureControl FEATURE_BROWSER_EMULATION iexplore.exe = (DWORD)
其中DWORD值必须等于下列值之一:
值 说明
7000 包含基于标准的 <!DOCTYPE> 指令的页面将以 IE7 模式显示。
8000 包含基于标准的 <!DOCTYPE> 指令的页面以 IE8 模式显示。
8888 页面始终以 IE8 模式显示,而不考虑 <!DOCTYPE> 指令。 (这可绕过前面列出的例外情况。)
关于IE浏览器确定文档模式的整个流程,可以参看这篇文章How IE8 Determines Document Mode,文中详细阐述了整个流程与内部机制。
小结:仍然坚持使用<!DOCTYPE html>,可最大程度减小发生错误的几率。
文档模式的检测
在JavaScript中可以通过documentMode来检测文档模式,在IE6和IE7中是使用compatMode来确定文档模式的,这个属性自IE8开始已经被documentMode所替代。
那么,如果需要兼容IE6和IE7的话(必须的 …),则相应的检测代码大致如下:
engine = null; if (window.navigator.appName == "Microsoft Internet Explorer"){ // This is an IE browser. What mode is the engine in? if (document.documentMode) // IE8 or later engine = document.documentMode; else{ engine = 5; // Assume quirks mode unless proven otherwise if (document.compatMode){ if (document.compatMode == "CSS1Compat") engine = 7; // standards mode } // There is no test for IE6 standards mode because that mode // was replaced by IE7 standards mode; there is no emulation. } // the engine variable now contains the document compatibility mode. }
IE6和IE7中的compatMode有两个可能的值“CSS1Compat”和“BackCompat ”,分别对应了IE6和IE7中的标准模式和怪异模式。上面的代码首先假定是怪异模式,然后再试图推翻假设。这里没有包含“IE6 标准模式”,因为它已经被IE7标准模式所替代,没有模拟的情况。
这里要注意,不同的文档模式对JavaScript也有一些影响,我们不必去深究不同文档模式对JavaScript有何种不同影响,只需要在编码时进行特定的特性检测即可。
小结:一般情况下是没必要进行文档模式检测的,对于样式兼容我们可以写CSS hack,而对于JavaScript来说,则更加推荐特性检测,而不是检测浏览器本身。
浏览器模式与文档模式之间的关系
浏览器模式可以决定页面默认的文档模式,但文档模式可能会受其他因素影响而改变,如上文所述。如果浏览器模式与文档模式设置不同的话,会不会有什么影响呢?
我们已经知道浏览器模式主要用于标识浏览器本身,原则上不会对页面渲染产生影响。但是我们又知道,浏览器模式可以影响条件注释,所以如果你的页面中有条件注释的话,那么浏览器模式的变化就会影响到页面渲染。
服务器端只能通过浏览器模式所标识的版本来确定客户端浏览器的版本,如果你将浏览器模式标识为IE9,但文档模式选择为IE7标准的话,就可能会有问题。不过这还要看服务器端是否有针对不同浏览器的处理策略,如果服务器端并未对不同浏览器的输出做差异化处理的话,那么这两个模式选项不同就不会有问题。
小结:如果服务器端对不同浏览器的输出做了差异化处理,那么浏览器模式和文档模式不一致就可能产生问题。
结语
本文参考了大量现有文献,详细阐述了各种模式的区别以及它们之间的关系。相信通过上面的叙述,你已经能够区分这些浏览器模式或者文档模式以及它们之间的关系了,每节的结论在小结中已有阐述,希望能够对你有所帮助。
IE9兼容性视图与IE9标准视图的更多相关文章
- .Net程序员学用Oracle系列(23):视图理论、物化视图
1.视图理论 1.1.视图的存储 1.2.视图的作用 1.3.视图的工作机制 1.4.视图的依赖性 1.5.可更新的连接视图 1.6.内联视图 2.物化视图 2.1.刷新物化视图 2.2.物化视图日志 ...
- mysql视图详解 mysql视图
目录 22.1. ALTER VIEW语法 22.2. CREATE VIEW语法 22.3. DROP VIEW语法 22.4. SHOW CREATE VIEW语法 本章讨论了下述主题: · ...
- 表视图(UITableView)与表视图控制器(UITableViewController)
表视图(UITableView)与表视图控制器(UITableViewController)其实是一回事. 表视图控制器是一种只能显示表视图的标准视图控制器,可在表视图占据整个视图时使用这种控制器.虽 ...
- Flask初学者:视图函数和类视图
当一个url请求进入后台时,一般有两种方式来进行处理:视图函数和类视图.视图函数直接使用一个函数来进行处理并返回数据给浏览器,类视图则是使用类来进行处理并返回的,所以当需要进行的处理比较简单,则可以考 ...
- drf二次封装response-APIViews视图家族-视图工具集-工具视图-路由组件
视图类传递参数给序列化类 (1).在视图类中实例化 序列化对象时,可以设置context内容. (2).在序列化类中的局部钩子.全局钩子.create.update方法中,都可以用self.conte ...
- SQL Server索引视图以(物化视图)及索引视图与查询重写
本位出处:http://www.cnblogs.com/wy123/p/6041122.html 经常听Oracle的同学说起来物化视图,物化视图的作用之一就是可以实现查询重写,听起来有一种高大上的感 ...
- 视图(View)与部分视图(Partial View)之间数据传递
写ASP.NET MVC程序,我们经常需要把数据从视图(View)传递至部分视图(Partial View) 或者相反. 今天Insus.NET使用 ControllerBase.TempData 进 ...
- iOS10 UI教程视图的绘制与视图控制器和视图
iOS10 UI教程视图的绘制与视图控制器和视图 iOS10 UI视图的绘制 iOS10 UI教程视图的绘制与视图控制器和视图,在iOS中,有很多的绘图应用.这些应用大多是在UIView上进行绘制的. ...
- iOS10 UI教程视图的边界与视图的框架
iOS10 UI教程视图的边界与视图的框架 iOS10 UI视图的边界 在视图的几何形状中我们提到了视图属性中的一部分属性可以将定义的视图绘制在屏幕上.其中典型的3个属性为边界属性.框架属性以及中心位 ...
随机推荐
- VHDL学习札记:library and Package
参考:http://www.cnblogs.com/garylee/archive/2012/11/16/2773596.htmlhttp:// http://forums.xilinx.com ...
- 字符串匹配KMP算法
1. 字符串匹配的KMP算法 2. KMP算法详解 3. 从头到尾彻底理解KMP
- CSS代码使纯英文数字自动换行
当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和FF中都会撑大容器,不会自动换行并且当数字或者英文中带有汉字时,会从汉字处换行,而纯汉字却可以自动换行.这个问题如何解决?先来认 ...
- jQuery on()方法示例及jquery on()方法的优点
jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法 ...
- 如何解除改变phpmyadmin数据库导入文件大小限制?
1.进到自己的系统里面 打开php.ini的配置文件 修改php.ini: file_uploads on 是否允许通过HTTP上传文件的开关.默认为ON即是开 upload_tmp_d ...
- ASP.NET中Server对象的几个方法
HtmlDecode 已重载. 对已被编码以消除无效 HTML 字符的字符串进行解码.HtmlEncode 已重载. 对要在浏览器中显示的字符串进行编码.MapPath 返回与 Web 服务器上的指定 ...
- MessageBox详解
MessageBox.Show();可谓是winform开发中用的次数最多的东东啦.先贴一张msdn的图解 msdn好像没有更新哎,只提供了这几种方法,并且参数名称和最新的有差别,但实际上messag ...
- c语言学习的第四天2
上图显示了float和double的精度,精度:就是指数值的精确程度,浮点类型可表示的数值范围很大,但只有几位是精确的,可以通过小 数所占的位数来获取,float小数部分最多能有7位有效数字,但绝对能 ...
- ContactsContract中涉及数据库中的一些列属性值【Written By KillerLegend】
ContactsContract.Data http://developer.android.com/reference/android/provider/ContactsContract.Dat ...
- 【转】资源文件在Delphi编程中的应用
段东宁 计亚南 (郴州职业技术学院, 湖南 郴州 423000) 摘要: 资源文件是一种能有效地组织.管理和使用资源的文件形式,在软件开发中有着广泛的应用.本文详细介绍了在Delphi编程中资源文件 ...