浏览器模式与文本模式

yiminghe

浏览: 1461791 次
性别:
来自: 上海

最近访客更多访客>>

akingde

xmg25

xiaolan02

archerfrank

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

浏览器 IE .net Microsoft Windows

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,如下：

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版本：

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，在样式中写明：

<body class='trident5'>

.trident5 xx{
  filter:none;
}

文本模式

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

updated 2010-11-10

当切换 document.documentMode ，不仅会切换渲染引擎，而且会切换 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 标签：

<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 表现一致，那么这时为了鲁棒性需要这样判断：

//直接判断引擎，防止兼容性模式影响
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 保持一致，如下：

<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。如下：

<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 下可用：

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

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

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

来判断。

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

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

查看图片附件

分享到：

css的优先级与继承 | 应用 closure compiler 高级模式

2010-11-03 18:13
浏览 16634
评论(1)
分类:Web前端
查看更多

1 楼辽主临轩 2014-08-27

怎么能让浏览器不进入文档模式的quirks模式，进入标准的

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论