IE浏览器兼容性模式

最近支持公司的一个内部业务管理系统,系统是基于jQuery来实现;用了2年的MVVM框架的我转向这个完全使用jQuery框架来开发的系统,真是相当不爽(相信用过MVVM框架的跟我是相同的感受);更为憋屈的是,到了这个年代,IE的亲爹微软都放弃支持IE6-10了,系统尽然还只支持使用IE浏览器(运营电脑安装都是IE8浏览器,所以大部分只管IE8),其他高级浏览器不被支持(当然这是由于系统使用了基于IE的一些插件导致)。

但是话又说回来,但是在支持系统的开发过程中,经常看到X-UA-Compatible的meta配置值,甚是不解,这也暴漏了自己在有关浏览器兼容性视图方面知识的缺陷。为此通过查阅资料对IE文档兼容性模式有了一定的理解,虽然这些东西会逐渐的退出历史舞台。


1、浏览器兼容性简介

  历史由来

在W3C标准推出之前的浏览器大战时代,微软的IE浏览器系列和网景浏览器之间各自为政,他们的页面是两套完全不同的实现方式,网页要兼容必须要实现两套代码;对于开发者来说,这是比较痛苦的,也不利于标准化和普及。为此W3C制定了一套标准规范,虽然初期这两个公司未必执行这些标准,毕竟人家有大量的市场占有率,一个小小的机构组织能奈我何;但是为日后的标准化制定了一套规范。在W3C规范推出后,之前各自为政开发的页面在标准模式下就不能使用了;由于存在大量规范之前开发的页面还在服务中,为此,为了兼容之前老页面的使用,这才有了浏览器兼容性;

  三种模式

浏览器器兼容性最早出现在IE6浏览器,是为了兼容之前页面的展示。它有IE6标准模式和IE5.5的怪异模式两种模式,其中诡异模式为了兼容之前老页面的。那么浏览器一般有几种模式呢?根据这篇文章《Activating Browser Modes with Doctype》介绍,准确的说是以下三种模式:

  • 标准模式(standards mode):按照W3C制定的标准来执行对应的HTML、CSS和JS行为。
  • 准标准模式(almost standards mode):大部分们是标准模式,只有一小部分表现为怪异行为。
  • 怪异模式(quicks mode): 按照网景4和IE5.5的行为来展现

  浏览器虽有上述三种模式,但是需要注意的是我们谈及最多的是标准模式和诡异模式,根据Activating Browser Modes with Doctype的介绍,不同的doctype可能会导致不同的模式。还需补充一点:标准模式并不完全标准。因浏览器厂商实现标准的阶段不同,所以各个浏览器的标准模式之间也有很大的不同。

浏览器区分标准和怪异模式,那么如何区分当前文档处于何种模式呢?

使用IE为document提供的compatMode属性来判断,具体判断如下表所示。后续其他的标准浏览器也实现了该属性用于检测文档处于何种模式;

compatMode值 文档模式
CSS1Compat 标准模式
BackCompat 怪异模式

  后来从IE8开始又为document提供了documentMode属性;它不像compatMode那样概括性的得出非此即彼的结果,而是可以具体检测当前IE浏览器版本下网页具体的文档呈现模式。如IE8下有3种模式:5(怪异模式)、7(IE标准模式)、8(IE8标准模式)。但是其他标准浏览器并没有实现该属性。

  另外,如果文档中没有包含DOCTYPE或者无法识别的DOCTYPE(除了下面讲到的X-UA-Compatible配置,其配置值为IE5-11会忽略DOCTYPE),那么浏览器就会进入怪异模式。


2、浏览器模式与文档模式

  这两个概念是与浏览器兼容性相关的,在兼容性视图下或者在开发者工具栏下,你将看到浏览器兼容性和文档模式。例如下图是本机IE9浏览器的开发者工具下的浏览器模式和文档模式

  

  • 浏览器模式(Browser Mode): 用于切换IE针对当前文档的默认文档模式对浏览器不同版本的条件注释的解析决定请求头的userAgent的值
  • 文档模式(document mode): 决定文档的排版引擎和js引擎

  在开发者工具中切换不同浏览器模式,其对应的默认文档模式为当前浏览器模式的值;如IE7-9的浏览器模式对应的文档模式分别为IE7-9标准;

  另外,注意IE8-9的兼容性模式对应的默认文档模式是IE7标准。例如下面代码在浏览器模式对应的兼容性模式下均为IE7文档模式:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3   <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>test</title>
 6     </head>
 7     <body>
 8         <!--[if IE 6 ]>
 9             <span style="color:red">this is ie6</span><br /><br />
10         <![endif]-->
11         <!--[if IE 7 ]>
12             <span style="color:red">this is ie7</span><br /><br />
13         <![endif]-->
14         <!--[if IE 8 ]>
15             <span style="color:red">this is ie8</span><br /><br />
16         <![endif]-->
17         <!--[if IE 9 ]>
18             <span style="color:red">this is ie9</span><br /><br />
19         <![endif]-->
20     </body>
21 </html>

不同文档模式,其documentMode值是不同的,根据上面一节讲到的,通过documentMode能具体的获取当前浏览器的文档呈现模式;如IE9下的文档模式有:

文档模式 documentMode
 怪异模式 5
IE7标准 7
IE8标准 8
IE9标准 9

 可以看到,IE8+后的浏览器版本的兼容性模式中,不会有IE6的文档模式。


3、IE浏览器的文档兼容模式

  上面介绍了IE浏览器模式的切换会改变网页的默认文档模式,但是是否可以指定网页的文档模式呢,这是当然可以的,这篇文章《定义文档兼容性,让IE按指定的版本解析我们的页面》讲解的很透彻;具体地是需要用到IE8才开始支持的X-UA-Compatible的meta配置;为该X-UA-Compatible配置不同的值,网页就会按照指定的文档模式来渲染模式以及对应的JS引擎来执行,也就是说开启了IE浏览器的兼容模式。例如为网页指定以IE8的标准模式来呈现的配置如下:

<meta http-equiv="X-UA-Compatible" content="IE=8">

除了上述的X-UA-Compatible配置值,还有其他的配置值,具体的如下:

X-UA-Compatible值 说明
IE=5 让浏览器使用Quirks mode来显示,实际上是使用Internet Explorer 7 的 Quirks 模式来显示内容,这个模式和IE5非常相似。
IE=edge 这个设置是让IE使用当前的最高版本进行文档的解析,官方文档指明,edge模式仅适用在测试环境,不建议在生产环境中使用
IE=7 使用标准IE7来处理
IE=EmulateIE7 模拟IE7来处理,遵循 <!DOCTYPE> 指令,如果文档有当前有一个合法的<!DOCTYPE>,就使用IE7模式,否者使用Quirks模式(Internet Explorer 5 Quirks),对于大部分网站来说,这是首选的兼容性模式
IE=8 标准IE8
IE=EmulateIE8 模拟IE8,遵循 <!DOCTYPE> 指令,参照IE=EmulateIE7说明
IE=9 标准IE9
IE=EmulateIE9 模拟IE9,遵循 <!DOCTYPE> 指令,参照IE=EmulateIE7说明
chrome=1 强制使用Chrome,需要IE下Chrome插件支持
IE=EmulateIE10 模拟IE10,遵循 <!DOCTYPE> 指令,参照IE=EmulateIE7说明
IE=10 标准IE10

  

  需要注意的是,若设置的值为表格其他值,那么IE的解释是会尝试将数值转化为最接近的浏览器版本。

<meta http-equiv="X-UA-Compatible" content="IE=7.5" > <!-- IE7 mode -->

  在客户端可以通过设置meta的X-UA-Compatible值的来变更浏览器的文档模式,服务器端同样可以变更浏览器的文档模式。服务可以在响应头response header中设置X-UA-Comptible的值为响应的值来变更当前网页的文档模式。

  服务器以这种方式,同样可以指定网页的文档模式;个人感觉这个种方式相对来说比较灵活,可以根据不同的浏览器来设置对应的文档模式。

  另外,IE开发者工具和IE浏览器的兼容性视图的列表配置等等均可以改变浏览器的文档模式。


4、决定IE浏览器文档模式的优先级

  话说回来,既然有上一节提到的4种方式可以变更浏览器的文档模式,那么他们的优先级孰高孰低呢?这个可以参考上面提到的文章《关于浏览器模式和文本模式的困惑》里面的两幅图来说明。

IE9下的文档模式的优先级的决定顺序如下图:

IE8的文档模式优先级如下图:

  从上面IE8、9的文档模式图中可以看出:

  • IE8、9浏览器的兼容性模式默认均是使用IE7仿真模式作为文档模式的;
  • 兼容性视图配置的信息同样默认是IE7仿真模式作为文档模式的。

所以在兼容老页面时,IE7仿真视图是首选的兼容性方式。

参考:

1、深入理解浏览器兼容性模式

2、关于浏览模式和文本模式的困惑

3、定义文档兼容性

4、定义文档兼容性,让IE按指定的版本解析我们的页面

5、Activating Browser Modes with Doctype

时间: 2024-10-09 22:59:11

IE浏览器兼容性模式的相关文章

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

摘要:关于各种浏览器模式,网上已经有许多文档和资料了,但是很少有能够完全将几个概念阐述清楚的.大部分的资料稍显过时,有些内容可能已经不再适用了.本文中笔者将尽可能将几个概念阐述清楚,并去掉一些过时的内容,仅保留必要的干货. 想必你一定知道浏览器有个标准(Standards)模式和一个怪异(Quirks)模式,或许你还听说过有个"准标准(Almost Standards)"模式.而当你打开Internet Explorer的时候,又看到了什么浏览器模式.文档模式,还有什么兼容性视图等等.

flex与相对定位在国内双核浏览器极速模式下的兼容性问题

---恢复内容开始--- 览器兼容性问题是前端的一个重要部分. 在国内的浏览器中,360浏览器,QQ浏览器等绝大部分都是双核浏览器.双核浏览器即拥有IE兼容内核和非IE极速内核两个内核,分别对应兼容模式和极速模式.兼容模式时使用IE内核,极速模式采用webkit内核.而目前大部分网站为了性能和用户体验,默认使用极速模式.在极速模式出现问题时,使用兼容模式. 虽然极速模式是使用的webkit内核,但是浏览器的表现却还是有一定差异.平时使用Chrome调试,在极速模式下却表现的不正常. 好,进入正题

浏览器兼容性问题之渲染模式——1

兼容性问题 目前市面上流行的浏览器有多种,这些浏览器在处理一个相同的页面时,表现或行为有时会有差异.这种差异可能很小,甚至不会被注意到:也可能很大,甚至造成在某个浏览器下无法正常浏览.我们把引起这些差异的问题统称为“浏览器兼容性问题”. 浏览器的内核 各品牌浏览器的内核是不同的,不同的内核处理同一段代码的时候思路不同.因此可以说,浏览器间内核的差异是产生兼容性问题的根本原因. “内核”也称为“引擎”.常见的浏览器及其渲染引擎(又称排版引擎).脚本引擎的列表如下: Browser Name Lay

网页页面NULL值对浏览器兼容性的影响

网页页面NULL值对浏览器兼容性的影响       近期做项目中一个页面中的input radio出现浏览器兼容性问题. 主要问题: 在谷歌浏览器,360急速模式和搜狗急速模式中给radio初始动态赋值时.checked属性失效,无法选中.注:360急速模式和搜狗急速模式使用了谷歌chorme的内核(又称webkit内核). 在火狐浏览器中给radio初始动态赋值时,checked属性正常选中. 本来同事以为是浏览器兼容问题,始终未能解决这个问题.后来这个Bug交由我来改动. 初始接到任务时,也

常见的浏览器兼容性问题大汇总

常见的浏览器兼容性问题大汇总 1 ie6.0横向margin加倍 产生因素:块属性.float.有横向margin. 解决方法:display:inline: 2 ie6.0下默认有行高 解决方法:overflow:hidden;或font-size:0;或line-height:xx px: 3 在各个浏览器下img有空隙(原因是:回车.) 解决方法:让图片浮动. 4 一个父标签与几个子标签嵌套,父标签不浮动,子标签float,子标签不撑开父的高度. 解决方法:a 在子标签最后清浮动{<div

浏览器兼容性问题汇总

# 浏览器兼容性问题汇总 ## 问题1 ### first-child ## <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div p:first-child { color: red; } </style> </head> <

脚本的浏览器兼容性问题

1.window对象不要去掉 window.parent.location 2.firefox和ie内置的对象确实不一样,你用jquery吧这个是跨浏览器的,只需要 $("#yourID").parent()就直接可以得到了 很方便,而且jquery也比较小,只有几十k,现在浏览器这么多 不可能不用跨浏览器解决方案的. 楼主不是通过http协议访问的吧,通过file协议webkit核心(chrome和360极速模式)parent,opener不能互访,会报错 以下以 IE 代替 Int

浏览器兼容性调试 (360 , IE , Chrome)

浏览器兼容性问题,一直是一个比较头疼的事情,各家有各家的标准,这就苦了广大 debuger 们. 一.360 目前,360安全浏览器的使用者已经越来越多,而且从微软宣布和360合作,对xp进行维护后,更是有不可阻挡的态势.那带来的问题,就是我们需要去适配360. 360采用双核机制,包括webkit 和 IE内核,在安装过程中,会检测本地IE版本,如果高于IE8,则不安装内置IE8. 同时,360帮助也给出了一个解决办法,详情参见:点此查看.从这份帮助文档来看,360还是有一定的野心的,呵呵.

AngularJS进阶(三十七)IE浏览器兼容性后续

IE浏览器兼容性后续 前言 继续尝试解决IE浏览器兼容性问题,结局方案为更换jquery.angularjs.IE的版本. 1.首先尝试更换jquery版本为1.7.2 jquery-1.9.1.js --> jquery-1.7.2.js -->  jquery2.1.4.js 无效 2.尝试更换IE版本IE8 IE11 --> IE8(本机系统不支持) --> IE10 angular-1.3.0.14 -->angular-1.2.0 相关代码如下: <div c