- 浏览: 1428478 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
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
可以在 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
发表评论
-
continuation, cps
2013-09-12 16:49 2698起 随着 nodejs 的兴起,异步编程成为一种潮流 ... -
一种基于匹配回朔的 css3 选择器引擎实现
2013-05-07 20:40 3333一种基于匹配回朔的 css3 选择器引擎实现 介绍 C ... -
cubic-bezier 模拟实现
2013-01-05 16:34 13992cubic-bezier 曲线是 css3 动画的一个重要基石 ... -
构建前端 DSL
2012-10-11 22:10 5270目前在传统的软件开 ... -
Get cursor position and coordinates from textarea
2012-04-10 20:50 4910最近需要从 textarea 中获 ... -
兼容 ie 的 transform
2012-02-23 14:00 6315css 2d transform 是 css3 引入的一个新的 ... -
promise api 与应用场景
2012-02-07 17:34 7261promise 是 commonjs 社区中提出的异步规范,其 ... -
closure compiler 代码优化实例
2012-01-08 03:23 2755closure compiler 可以进行不少有意思的优化 ... -
write html parser
2011-12-01 02:48 2832首先需要声明 html 不能用正则表达式来直接匹配进行内容抽取 ... -
获取剪贴板数据
2011-11-07 23:31 6357兼容性: 获取剪贴板数据这块各个浏览器间存在很大的 ... -
url 映射问题
2011-11-07 21:52 3150背景 url mapping 我最早知道是作为 j ... -
tip:如何原生播放声音
2011-10-19 12:45 2868如果不想考虑浏览器间 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2772简介 如果你经 ... -
cross domain request
2011-09-29 18:39 2775场景 跨域请求是随着 ... -
基于多继承的树设计
2011-09-18 03:42 2187分类 树是一种常见 ... -
caja 原理 : 前端
2011-09-01 16:48 6910作为前端开放的基础安全保证,caja 是目前比较合 ... -
tokenization of html
2011-08-29 22:38 2659html 符号解析问题 场景: 在页面上输出包 ... -
ie 下 cloneNode 导致的属性克隆
2011-08-24 16:10 2398这个还是很值得记下,一直存在的很大隐患终于解决,由于在 ie& ... -
循环引用下的深度克隆
2011-08-04 20:39 2220深度复制和浅度复制 是当初初学 c 遇到的第一批问题,似乎使 ... -
模块的静态与动态循环依赖
2011-07-25 03:43 3176场景: 循环依赖 我是不支持的,但现实中似乎又确实需 ...
相关推荐
本程序是自己练习多线程异步回调时的作品,可以利用线程加载指定目录下的所有文件,并进行各种模式的搜索。对于委托和多线程不了解得同学可以好好研究,相信大有裨益。
“文本修辑转换器”(原名文字变变)是纯文本的编辑器。它除了具备一般文本编辑功能,还可实现文本浏览,文本快速整理以及。... 使用浏览器模式本程序可作为文本浏览器,很方便的实现文本的浏览和删除
解决不同浏览器下载时中文名乱码问题,针对,不同的浏览器,采用不同的编码
lynx命令是终端上的纯文本模式的网页浏览器,没有JS引擎,不支持CSS排版、图形、音视频等多媒体信息。只能作为一个很有趣的小玩具。 语法格式:lynx [参数] 常用参数: -case 搜索字符串时区分大小写 -ftp 关闭...
软件最大的特色是在传统浏览器的基础上增添了高亮标记网页功能、网页朗读模式、文本朗读模式。网页朗读模式可以对网页全部内容、鼠标选择内容、高亮显示内容进行提取、替换和朗读。值得一提的是软件还可以同时可以将...
书中包含了350 多种可以立即使用的设计模式(涉及文本、背景、边框、图片、表格、布局等多方面),并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计,易于实现和使用。通过阅读此书,可...
org-protocol-capture-html, 将浏览器中的HTML从浏览器选择中捕获为org模式内容 org-protocol-capture-htmlorg协议非常出色,但是浏览器将页面内容的HTML转换为纯文本的工作非常糟糕。 但是,Pandoc支持从HTML转换为...
http(超文本传输协议)是一个基于请求与响应模式的、无状态的、应用层的协议,常基于TCP的连接方式,HTTP1.1版本中给出一种持续连接的机制,绝大多数的Web开发,都是构建在HTTP协议之上的Web应用。HTTP URL (URL是...
它主要用作Git存储库浏览器,但也可以辅助staig Tig:Git的文本模式界面什么是Tig? Tig是git的基于ncurses的文本模式界面。 它主要用作Git存储库浏览器,但也可以协助分阶段进行更改以在块级别进行提交,并充当各种...
书中包含了350 多种可以立即使用的设计模式(涉及文本、背景、边框、图片、表格、布局等多方面),并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计,易于实现和使用。通过阅读此书,可...
书中包含了350 多种可以立即使用的设计模式(涉及文本、背景、边框、图片、表格、布局等多方面),并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计,易于实现和使用。通过阅读此书,可...
傲游3浏览器是国内唯一具有独立内核的桌面浏览器产品,首创双核浏览模式,在安全、快速的基础上,保证了对网银、网购类网站的兼容性。傲游3浏览器内置云端广告过滤系统,强大而易用,确保用户在浏览网页时不受任何...
书中包含了350 多种可以立即使用的设计模式(涉及文本、背景、边框、图片、表格、布局等多方面),并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计,易于实现和使用。通过阅读此书,可...
书中包含了350 多种可以立即使用的设计模式(涉及文本、背景、边框、图片、表格、布局等多方面),并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计,易于实现和使用。通过阅读此书,可...
书中包含了350 多种可以立即使用的设计模式(涉及文本、背景、边框、图片、表格、布局等多方面),并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计,易于实现和使用。通过阅读此书,可...
eWebEditor V7.0 版发布,新增支持FireFox(火狐)、Chrome(谷歌)浏览器。新增超级多文件分块上传、G级大文件上传解决方案。内核全部重写。完美对话框界面。增强的多插件媒体插入支持、选项卡、代码格式化、保护模式、...
书中包含了350 多种可以立即使用的设计模式(涉及文本、背景、边框、图片、表格、布局等多方面),并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计,易于实现和使用。通过阅读此书,可...
提供旧样式文本模式的跨浏览器Javascript库
GUI可能需要非文本丰富的内容人类可读的文本模式和原始 (html) 模式Web 开发人员友好嵌套[onclick]可以精确点击放大/缩小 html 标签专注于具有多列的页面的主要内容我正在考虑浏览器所需的操作和相应的 lsp 方法。...