浏览器模式与文本模式

转自：http://yiminghe.iteye.com/blog/802021

IE 版本实在太多了，而且每个版本又变化很大，出到 IE9 连微软都开始担心开发者能否搞定，于是就有了这篇官方博文，详细介绍了自 IE8 起引入的兼容性解决方案：

Testing sites with Browser Mode vs. Doc Mode

浏览器模式

不受程序员控制，用户可以自由选择合适的ie版本，影响了以下三个方面：

1.发送给服务器合适的UA

2.控制页面中的条件注释。（条件注释依赖于 UA 串）

3.对应了默认的文本模式（渲染模式，IE8 引入document.Mode）。

关于默认对应关系可见：

updated 2010-10-24

ie UA 判断需要考虑渲染引擎版本 trident

兼容模式和其他模式的区别在于，兼容模式会在UA中表示自己是 MSie7 但是同时也会表示自己的渲染引擎是trident 5.0,如下：

Js代码

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/5.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

但是选择ie7模式时，则会完全丢弃掉trident版本：

Js代码

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

一般来说，终端用户可选择兼容模式（地址栏兼容按钮），但是开发者通过 trident 仍然可以知道真正的浏览器版本，其他模式主要用于程序员调试（程序完全不知），终端用户如果选择后果自负！

比如一个 ie9 问题，当程序设置 document mode 处于 ie9 时，透明度 filter 设置会失效即透明失效，即使设置了opacity，这是就可以根据trident来判断，无论是 MSIE7.0 (兼容模式)还是 MSIE9.0(ie9模式) [具体哪种模式受微软白名单控制以及用户选择]，都把filter去掉，具体方法则是初始化时在页面body上加入class:tridentxx，在样式中写明：

Html代码

<body class='trident5'>
.trident5 xx{
filter:none;
}

文本模式

直接和界面显示相关，用来指示选择具体的渲染引擎，例如 ie8 标准模式下不支持 css表达式。脚本可以通过 document.documentMode 探测。

updated 2010-11-10

当切换 document.documentMode ，不仅会切换渲染引擎，而且会切换 js 引擎，可在切换前后分别执行以下程序测试：

Js代码

typeof Object.create

可以通过以下方面由程序员控制

1. 页面中的 DOCTYPE 属性。

需要注意的是：实际上从 ie8 起存在 3 种渲染机制，目前推荐 <!DOCTYPE html>触发完全标准模式。

其他详见：Quirks mode、Almost standards mode、Standards mode

2. X-UA-Compatible Meta tag

可以在 head 开头插入 meta 标签：

Html代码

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

mode 取值结合 1 DOCTYPE 会直接影响到使用哪个渲染引擎：

更详细的见这里：how-ie8-determines-document-mode

3. HTTP Header

同2，不过直接操作 http 协议头，需要注意的是 2 的优先级比 3 高。

最后如果还不能够确定，那么 ie 的兼容性列表也会影响到具体表现，可在

res://iecompat.dll/iecompatdata.xml

查看，用户也可在工具-兼容性视图设置下手动设置，将特定网站加入兼容性列表。

update 2010-11-17 :

attribute 与 property , content value 与 dom value

attribute 的判断读取在 ie <9 之前是非常混乱的事情，节点的 .attributes 在标准浏览器下只会返回用户设置的属性节点集合，而在 ie<8 下则会把所有可以设置的属性都返回过来，特别在需要知道某个元素是否被用户设置了属性时就会十分麻烦，需要遍历.attributes 一一判断 specified 是否为 true ，而 documentMode 也会切换 js 引擎，在 ie8 的文本模式选择了 ie7 标准时，其属性方面和真实的 ie7 表现一致，那么这时为了鲁棒性需要这样判断：

Js代码

//直接判断引擎，防止兼容性模式影响
var ieEngine=(function() {
if (!UA.ie) return;
return document.documentMode || UA.ie;
})();
var hasAttributes = ieEngine < 8 ?
function (el) {
var attributes = el.attributes;
for (var i = 0; i < attributes.length; i++) {
var attribute = attributes[i];
if (attribute.specified) {
return true;
}
}
return false;
} : function (el) {
//删除firefox自己添加的标志
UA.gecko && el.removeAttribute("_moz_dirty");
return el.hasAttributes();
}

关于 attribute 与 property 的关系就更复杂了，在 ie6,7 下表示 content value 的attribute 与表示 dom value 的 property 混淆了，并且在 ie8 documentMode 为混杂以及 ie7 模式下和 ie6,7 保持一致，如下：

Html代码

<a href='../x.html' id='t'>test</a>
<script>
var a=document.getElementById("t");
alert(a.getAttribute("href"));
alert(a.getAttribute("href",2));
</script>

另一点需要注意的是，设置 innerHTML 在 ie6,7 下会触发设置的 content value 转换成为dom value，当然这只对 html 相关属性起作用，只有 html 属性才可能有不同于 content value 的 dom value。如下：

Java代码

<div id='tt'>
<a href='../x.html' id='t' _saved_href='../x.html'>test</a>
</div>
<script>
var tt=document.getElementById("tt");
alert(tt.innerHTML);
tt.innerHTML=tt.innerHTML;
alert(tt.innerHTML);
</script>

单个属性节点存在判断：

在 ie 下可用：

Js代码

elem.attributes[name] && elem.attributes[name].specified

但是对于多个单词组成的属性，例如 tabindex 会出问题，最好用

Js代码

var name='tabindex';
elem.tabIndex=1;
var attr = elem.getAttributeNode(name);
return attr ? attr.specified : false;

来判断。

而对于 attribute 和 property 还没有完全分开，如果设置自定义属性/expando，那么会发现无论读 expando 还是 attribute 都可以读出来 :(

Js代码

var o=document.body;
o.xx="oo";
o.setAttribute("xx2","oo2");
alert(o.xx);
alert(o.getAttribute("xx"));
alert(o.xx2);
alert(o.getAttribute("xx2"));

ie9 则是完全解决了

具体可见：

http://msdn.microsoft.com/zh-cn/library/dd347148(en-us,VS.85).aspx

http://msdn.microsoft.com/en-us/library/ms536429(VS.85).aspx

http://jsfox.cn/blog/javascript/get-right-href-attribute.html

http://w3help.org/zh-cn/causes/SD9006

http://www.w3.org/TR/DOM-Level-2-HTML

PS: 这个工具也不错

Introducing the IE8 Developer Tools JScript Profiler

其他文章：

IE’s Compatibility Features for Site Developers

Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8

Internet Explorer 8 document and browser modes

浏览器模式与文本模式相关推荐

关于浏览器模式和文本模式的困惑
什么是浏览器模式和文本模式? 经常使用IE开发者工具的同学,肯定见过浏览器模式和文本模式,对于这两个名词,综合相关文档解释如下: 浏览器模式(Browser Mode),用于切换IE针对该网页的默认文 ...
IE6,7,8开发人员工具使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)
在上一篇文章IE8"开发人员工具"使用详解上(各级菜单详解) 中,我们详细地讲解了IE8开发人员工具中各个菜单中命令的使用方法,相信很多朋友应该已经使用上了.而IE8开发人员工具更 ...
linux图形模式切换用户,Linux的图形模式和文本模式以及单用户模式切换
打开一个终端输入init 3 (注意init后面有一个空格) 等一会就进入了图形界面以上方法切换后,窗口模式完全关闭.如果窗口中有文件未保存,将丢失. (用init 5可以回到图形界面,但原来的 ...
文件读写的“二进制模式”和“文本模式”
二进制模式:将内存中的数据(01序列)直接传送到文件中,没有任何转换.如:char ch = 0x7d; fwrite(&ch, sizeof(char), 1, pfile);直接把0x7d ...
Latex 数学符号显示为文本模式数学模式转为文本模式
用LaTeX写论文的时候遇到要将数学符号显示成文本格式,如'\left('编译后是'('但是我想让它编译后还是显示'\left(',只要在改为\verb| \left( |即可.\verb 命令被设计 ...
J2EE系列：再谈IE的浏览器模式和文档模式
以前在 "IE8兼容视图(IE7 mode)与独立IE7的区别"一文中曾经涉及过浏览器模式和文档模式,但二者的区别却不甚了了,现在有了新的认识,再补充一下. 1.浏览器模式与文档模 ...
超详细Centos6.5文本模式安装步骤
对于刚接触Linux的用户来说,安装系统和配置网卡的过程也可能要用很长的时间,Centos6.5的安装方式有二种,图形模式和文本模式.文本模式从6开始就不支持自定义分区了(新手练习时默认分区足够用), ...
文件操作：读写模式、操作模式、操作方法
文件操作补充储备 1.with语法支持一次性打开多个文件,需要用逗号隔开eg:with open(r'a.txt','r',encoding='utf8') as f1 , open(r'b.txt ...
设置IE浏览器文本模式为IE8或IE7
在HTML 页面 head 标签中添加meta标签: <meta http-equiv="X-UA-Compatible" content="IE=8"/ ...

浏览器模式与文本模式

浏览器模式与文本模式相关推荐

最新文章

热门文章