`
coolerbaosi
  • 浏览: 730521 次
文章分类
社区版块
存档分类
最新评论

测试DOCTYPE在各种浏览器上的Quirks模式和标准模式

 
阅读更多


首先声明, 讨论这个问题本文不具备太大的现实意义, 就好比花大笔墨讨论用java1.1重写我们目前的项目会有哪些影响一样. 但是做web开发, 难免要接触它. 我各人觉得quirks模式翻译为怪异模式不是很好, 至少我花了好久才揣摩出它的真正含义. 简单来说, quirks模式就是兼容模式, 就是让相对较新的浏览器兼容旧浏览器, 让较新的浏览器表现的像旧的浏览器一样, 包括再现旧浏览器中已知的bug. 从开发者的角度来说, 就是让我们今天写出来的代码, 能够在旧的浏览器(比如ie5)上正确地表现. 除了兼容(quirks)模式和标准模式, 还有过渡(transitional)模式, 即没有完全兼容旧版本的bug.

DOCTYPE, 一般出现在html文档的第一行就是用来触发浏览器的渲染模式. 根据mozilla网站上一篇文章的介绍, DOCTYPE在HTML5中仅仅用来触发标准模式, 旧版本的HTML可能会给予DOCTYPE更多的含义, 但是还没有哪个浏览器用DOCTYPE来做除了切换兼容模式以外的事情. 我们不妨用下面的code来检测一下浏览器的渲染模式:

<!-- DOCTYPE Here -->
<html>
	<head><title>DOCTYPE Test</title></head>
	<body><div id="d"></div></body>
	<script>
		function $(id){
			return document.getElementById(id);
		}
		$('d').innerHTML = document.documentMode + '<br />' + document.compatMode
	</script>
</html>
我挑选了如下一些DOCTYPE的声明方式, 得到如下的结果:
DOCTYPE声明 说明 IE8 FF Chrome
<!DOCTYPE HTML> HTML5推荐的方式 CSS1Compat CSS1Compat
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd" >
严格模式声明并给出DTD URL CSS1Compat CSS1Compat
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 严格模式声明但不给出DTD URL CSS1Compat CSS1Compat
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
过渡模式并给出DTD URL CSS1Compat CSS1Compat
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 过渡模式但不给出DTD URL BackCompat BackCompat


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"somethingbad">



http://www.cs.tut.fi/~jkorpela/quirks-mode.html


有点难总结,未完。。。
分享到:
评论

相关推荐

    知名浏览器对DOCTYPE模式的选择机制

    本文包括的模式转换(mode switching)适用于Firefox和其他基于Gecko的浏览器,Safari、Chrome和其他基于Webkit的浏览器,Opera、 Konqueror、Mac版Internet Explorer、Windows版Internet Explorer和内嵌IE的浏览器...

    浅谈浏览器兼容性模式[按F12便知]

    面试官:请你谈谈标准(Standards)模式、怪异(Quirks)模式、准标准(Almost Standards)模式,当你打开IE9时候会看见,浏览器模式,文档模式,兼容性视图,这些又是什么? 好吧,一点点来:先明白一个词DTD(文档类型...

    HTML !DOCTYPE 标签 声明HTML版本

    DOCTYPE&gt;标签的定义和用法。 准确的说,&lt;!DOCTYPE&gt;并不是HTML标签,它声明web浏览器关于页面使用哪个 HTML 版本进行编写的指令。 在 HTML 4.01 中,&lt;!DOCTYPE&gt; 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了...

    html doctype 作用介绍

    不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析,所以Doctype是非常关键的,尤其是在 IE 系列浏览器中,由DOCTYPE 所决定的 HTML 页面的渲染模式至关重要。 两种渲染模式: BackCompat:...

    前端vue面试题大全汇总

    1、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 2、每个HTML 文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 3、Quirks 模式是什么?它和Standards 模式有什么区别. 4、div+css 的...

    front-end-dev-basics:每个前端开发人员都应该知道的基础知识

    这里的关键是 IE 中的 quirks 模式与其他浏览器中的 quirks 模式大不相同,这意味着如果页面以 quirks 模式呈现,那么您将比在 quirks 模式下呈现时更难确保您的页面在所有浏览器中一致工作它们以标准模式呈现。...

    CrystalAngelLee#crystal-interview#Doctype 作用? 严格模式与混杂模式如何区分?它们有何

    ( HTML5 没有严格和混杂之分)区分DTD: Document Type Definition文档包含严格的 DOCTYPE:一般以严格模式呈现包含过渡 D

    IE下文本模式!DOCTYPE作用介绍

    继上一篇文章中谈到的表单自动填充问题解决后,接下来又遇到新的问题,就是页面在IE下部分样式显示不正确。通过IE开发人员工具查看对应样式存在,...DOCTYPE,导致浏览器没有通过标准模式解析网页。 !文档类型(英

    百度地图毕业设计源码-Front-End-interview-questions:整理收集常见前端面试问题及一些知识点

    混杂模式下,浏览器会模仿旧浏览器的行为,比如IE6,在此基础上兼容新的标准特性。 混杂模式又称兼容模式、怪异模式等。 声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。 如果你是使用最新标准...

    Html题目问题已经答案完整版

    在严格模式(标准模式)中,浏览器根据规范呈现页面;在混杂模式中,页面以向后兼容的方式显示,以防止老站点无法工作。 如果HTML文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现,对于HTML4.01文档,包含严格...

    html标题_DOCTYPE的含义

    html标题_DOCTYPE的含义 有关DOCTYPE标签的各种用法

    2018最新BAT 《前端必考面试》.docx

    (2)、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 (3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 (4)、DOCTYPE不存在或格式不正确会...

    HTML !DOCTYPE 标签.docx

    HTML !DOCTYPE 标签.docx

    为什么使用DOCTYPE HTML

    你知道如果没有它,浏览器在渲染页面的时候会使用怪异模式;你知道各个浏览器在怪异模式下对各个元素渲染是有差异的。所以你会写像这样的doctype: 复制代码代码如下: &lt;!DOCTYPE html PUBLIC “-//W3C//DTD ...

    完美解决jsp页面在IE8下文本模式自动为(杂项Quirks)导致页面显示错位

    DOCTYPE html&gt;文档都上方的,但是在IE8浏览文本模式默认就编程了“Quirks”模式,显示不正常,后来改成了写在文档头下方就可以正常显示了,经过这次吸取了教训,也希望给遇到此类问题的同学一个借鉴的灵感!...

    DOCTYPE文档类型声明

    DOCTYPE文档类型声明..........

    HTML的!DOCTYPE是什么意思.zip_zip和rar区别

    HTML的!DOCTYPE是什么意思.zip

    精通CSS高级Web标准解决方案-包含源码(高清PDF中文版)

    1.1.2 文档类型、DOCTYPE切换和浏览器模式 1.2 为样式找到目标 1.2.1 常用的选择器 1.2.2 通用选择器 1.2.3 高级选择器 1.2.4 层叠和特殊性 1.2.5 继承 1.3 规划、组织和维护样式表 1.3.1 对文档应用样式 ...

    DOCTYPE html PUBLIC.doc

    DOCTYPE html PUBLIC.doc

Global site tag (gtag.js) - Google Analytics