`
yiminghe
  • 浏览: 1466473 次
  • 性别: 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模式,进入标准的

相关推荐

    vb api文本浏览器

    VB API文本浏览器是一种基于Visual Basic (VB) 开发的简单应用程序,它利用Windows API (Application Programming Interface) 来实现对文本文件的浏览功能。在VB的默认库中,可能并未包含高级的文本浏览特性,因此...

    Linux图形模式 文本模式切换总结

    下面将详细介绍Linux图形模式与文本模式的概念、用途及切换方法。 一、Linux图形模式 1. **概念**:图形模式提供了一个直观的桌面环境,用户可以通过鼠标和图标来操作各种应用程序,如文件管理器、浏览器、编辑器...

    c#实现的文本浏览器

    本程序是自己练习多线程异步回调时的作品,可以利用线程加载指定目录下的所有文件,并进行各种模式的搜索。对于委托和多线程不了解得同学可以好好研究,相信大有裨益。

    带夜间模式的浏览器

    值得注意的是,虽然通过文件名称列表中的图片和文本文件,我们可以对这款浏览器的外观和部分功能有所了解,但对于其更为深入的技术细节,例如浏览器内核、安全措施、数据加密等方面,还需要通过更多渠道获得信息。...

    RFC文本文件浏览器

    **RFC文本文件浏览器** 在信息技术领域,RFC(Request for Comments)文档是标准制定过程中的重要组成部分,用于记录和讨论技术规范、协议以及建议。RFC文本文件浏览器是一款专门设计用来查看和阅读这些文档的软件...

    格式文本浏览器

    7. **兼容性与跨平台**:格式文本浏览器通常兼容不同的操作系统,如Windows、Mac OS和Linux,确保用户无论在哪种设备上都能使用。 8. **安全性**:为了保护用户的隐私和数据安全,软件可能包含加密或安全措施,防止...

    java的文本浏览器

    Java的文本浏览器是一种基于Java编程语言开发的轻量级应用程序,主要用于查看和处理文本文件。在本项目中,我们关注的是一个简化的版本,它的主要目的是帮助开发者学习和理解如何在Java中实现文本的高亮显示和其他...

    护眼插件-浏览器夜间模式

    1. **下载与导入**:首先从可靠来源下载这个版本的插件文件,然后在打开的浏览器中进入扩展管理页面(通常是`chrome://extensions/`),开启“开发者模式”,点击“加载已解压的扩展程序”,选择包含".crx"文件的...

    Android代码-[安卓开源]带夜间模式的浏览器项目.zip

    通过研究这个开源项目,开发者不仅可以学习到 Android 浏览器的实现细节,还能掌握夜间模式的设计与实现,同时提高对Android系统、网络编程、用户界面设计等方面的理解,是提升Android开发技能的宝贵资源。

    文本浏览器w3m-0.5.3.tar.gz

    在数字化时代,虽然图形用户界面的浏览器已经占据了主导地位,但文本模式的浏览器依然有着其独特的应用场景和价值。w3m,作为一款优秀的文本浏览器,以其简洁、高效的特点,深受程序员和终端爱好者喜爱。本文将对w3m...

    UC浏览器酷影模式是什么.docx

    此外,酷影模式具备广告过滤功能,内置了自主知识产权的广告过滤插件,能够自动屏蔽各种浮动广告、弹窗广告以及文本广告,为用户提供一个清爽的浏览环境。同时,它还能防止木马和钓鱼网站的侵扰,保护用户的网络安全...

    基于java语言的浏览器设计与实现.doc

    基于 Java 语言的浏览器设计与实现 本资源摘要信息将详细介绍基于 Java 语言的浏览器设计与实现的知识点。 1. 浏览器的设计与实现 浏览器是互联网上查找信息的重要工具,给人们提供了巨大而又宝贵的信息财富。...

    文本浏览器 for Geimei x760+ v2.5

    文本浏览器的核心功能可能包括打开、浏览、搜索、编辑纯文本文件,支持书签、夜间模式、自定义字体大小等特性。对于Geimei x760+这样的设备,它可能是用户阅读电子书籍、查看文档或处理简单文本任务的主要工具,尤其...

    体验浏览器清爽阅读模式.docx

    浏览器清爽阅读模式是一种提高在线阅读体验的功能,尤其适用于那些希望减少网页中干扰因素,专注于文本内容的用户。本文主要介绍了如何在Google Chrome浏览器中利用Readability插件实现这一功能。 Readability是一...

    chm文本文件浏览器(简单易用)

    “chm文本文件浏览器(简单易用)”是一款专门设计用于浏览和阅读CHM文件的工具。这款浏览器旨在提供用户友好的界面和便捷的操作方式,使得非技术背景的用户也能轻松查阅CHM文件中的内容。它的主要功能可能包括: 1...

    【cocos creator】网页/浏览器读取保存json/text文件

    在Cocos Creator中,网页或浏览器环境下的文件操作与传统桌面应用有所不同,因为它们受到安全策略的严格限制,比如沙箱环境和同源策略。不过,开发者仍然可以通过一些API和技巧来实现读取和保存JSON或文本文件。下面...

    IE8兼容模式的设置

    这包括调整兼容性视图设置、单个页面的浏览器模式和文本模式等。此外,对于使用第三方浏览器的用户来说,还需要特别注意兼容模式的选择,以及每次模式切换后的重新设置。通过遵循上述步骤,可以有效解决由浏览器版本...

    北大青鸟的新闻浏览器

    1. **网络编程**:在“北大青鸟的新闻浏览器”中,C#的网络编程接口(如System.Net命名空间)被用于与互联网进行通信。HTTP请求和响应的处理是通过HttpWebRequest和HttpWebResponse类来实现的,这些类使得浏览器能够...

Global site tag (gtag.js) - Google Analytics