`
yiminghe
  • 浏览: 1428478 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

浏览器模式与文本模式

阅读更多

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 则是完全解决了

 

 

具体可见:









 

 

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

 

 

  • 大小: 9.1 KB
  • 大小: 9.6 KB
  • 大小: 28.8 KB
  • 大小: 33.5 KB
  • 大小: 24.2 KB
分享到:
评论
1 楼 辽主临轩 2014-08-27  
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的

相关推荐

Global site tag (gtag.js) - Google Analytics