大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > CSS技巧 > 深入理解浏览器兼容性模式

深入理解浏览器兼容性模式(2)

关键词:浏览器兼容性模式  阅读(1635) 赞(55)

[摘要]本文主要介绍浏览器兼容问题,在开发网站时掌握浏览器兼容模型对网站设计及兼容性将有很大改善,与大家分享。

IE的浏览器模式

IE8有4种模式:IE5.5怪异模式、IE7标准模式、IE8准标准模式和IE8标准模式,而IE9有7种模式: IE5.5怪异模式、IE7标准模式、IE8准标准模式、IE8标准模式、IE9准标准模式、IE9标准模式、XML模式。

其中XML模式是针对XML文档的,这里不打算阐述,细节可以看这篇文章[Defining Document Compatibility](http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx) 中有详细阐述。

在IE8及以后的的IE浏览器中,支持X-UA-Compatible头,可以通过在服务器端设置HTTP头,或者在页面中插入<meta>标签来实现:

HTTP:  
Header set X-UA-Compatible "IE=8"  
Meta:  
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

这种方法主要是防止老的页面在较新的浏览器中显示不正常的情况的, 比如上面的代码可以强制IE8以上版本的浏览器以IE7的模式进行渲染。

注意,不要在新开发的网页中使用这种技术,这种技术只应该作为新老网页更替过程中的过渡方案。由于目前新开发的网页都是尽量支持最新版本的浏览器的,所以这种技术也会慢慢被淘汰,感兴趣的同学可以详细阅读 微软的这篇文档。

小结:这里我们需要知道有这种方式可以强制浏览器以某种模式运行,但只应作为过渡方案,不应在新开发的网页中使用。

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 

话说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 // IE 5-7  
{  
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.  
} 

E6和IE7中的compatMode有两个可能的值“CSS1Compat”和“BackCompat ”,分别对应了IE6和IE7中的标准模式和怪异模式。上面的代码首先假定是怪异模式,然后再试图推翻假设。这里没有包含“IE6 标准模式”,因为它已经被IE7标准模式所替代,没有模拟的情况。

这里要注意,不同的文档模式对JavaScript也有一些影响,我们不必去深究不同文档模式对JavaScript有何种不同影响,只需要在编码时进行特定的特性检测即可。

小结:一般情况下是没必要进行文档模式检测的,对于样式兼容我们可以写CSS hack,而对于JavaScript来说,则更加推荐特性检测,而不是检测浏览器本身。

浏览器模式与文档模式之间的关系



相关评论