摘要

　　我们在制作页面时必须要测的就是IE浏览器，毕竟IE浏览器市场占有率还是很高。随着HTML5的流行，可能项目要求兼容IE最低版本为IE8或者更高，但是还是有很多项目兼容IE低版本。所以我们经常会碰到页面在ie浏览器低版本中排版错乱的问题，这是因为IE浏览器有两个模式影响着页面，现在就来研究下

文档验证机制（DTD）

　　DTD是html文件的验证机制,属于html文件组成的一部分。三种文档类型：S（Strict）、T（Transitional）、F（Frameset）。

  • Strict
    干净的标记，免于表现层的混乱。
  • Transitional
    DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 HTML 的呈现特性时使用
  • Frameset
    DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD

HTML5简化了DTD，可以直接使用 <!DOCTYPE HTML>。

模式

　　模式主要是针对ie浏览器，在ie7以下，微软的代码规范与W3C制定的标准有所差别，但是ie市场占有率非常大，所以开发人员会按照微软的规范来编写代码，随着各大浏览器厂商的发展和W3C组织的努力，浏览器的标准化越来越明显。微软为了兼容ie6/7，在ie8浏览器增加了模式这个功能，这样就可以解决代码标准不一致而引起的问题。

模式分为两种一种是浏览器模式，一种是文档模式。这两种模式有什么区别呢？

  • 浏览器模式
    用于切换IE针对该网页的默认文档模式、对不同版本浏览器的条件备注解析、发送给网站服务器的用户代理（User-Agent）字符串的值。网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版本和安装的功能，这样就可以向不同的浏览器返回不同的页面内容。默认情况下，IE8的浏览器模式为IE8。用户可以手动切换到不同的浏览器模式。
  • 文档模式
    用于指定IE的页面排版引擎（Trident）以哪个版本的方式来解析并渲染网页代码。切换文档模式会导致网页被刷新，但不会更改用户代理字符串中的版本号，也不会从服务器重新下载网页。切换浏览器模式的同时，浏览器也会自动切换到相应的文档模式。

对于文档模式，每个浏览器都有不同的工作模式

  IE6 IE7 ​IE8 ​IE9 IE10 Chrome Firefox Safari Opera
混杂模式（Quriks Mode） 有 有 有 有 有 有 有 有 有
接近标准模式（Almost Standards Mode） 无 无 有 有 有 有 有 有 有
标准模式（Standards Mode） 有 有 有 有 有 有 有 有 有

我们如何控制浏览器以何种文档模式来显示页面呢？

<meta http-equiv="X-UA-Compatible" content="IE=edge">

通过上面的代码用来指定IE浏览器以标准文档模式渲染页面，我们可以修改edge来指定特定版本，例如：IE=8

问什么要控制这个呢？很明显，加上这个元素能够告诉浏览器用什么模式来渲染页面，有时候我们在IE高版本的浏览器中显示正常，到了低版本排版就乱了，加上下面的和正确的DTD声明就可以了。

< meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />

判断当前页面的文档模式

 <!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1">

 </head>

 <body>

     <script>

         function detect() {

             var mode = document.documentMode;

             switch (mode) {

                 case  5:

                     alert('Internet Explorer 5 quirks mode');

                     break;

                 case  7:

                     alert('Internet Explorer 7 Standards mode');

                     break;

                 case 8:

                     alert('Internet Explorer 8 Standards mode');

                     break;

                 case 9:

                     alert('Internet Explorer 9 Standards mode');

                     break;

                 case 10:

                     alert('Internet Explorer 10 Standards mode');

                     break;

             }

         }

         detect();

     </script>

 </body>

 </html>

S(标准模式)、A(接近标准模式)、Q(混杂模式)

Doctype NS6 Old Moz Moz &
Safari &
Opera 10
&
IE10
& HTML5		 Opera 9.0 IE 8, IE 9 & Opera 9.5 IE 7 & Opera 7.10 IE 6 & Opera 7.0 Mac IE 5 Konq 3.2
None Q Q Q Q Q Q Q Q Q
<!DOCTYPE html> Q S S S S A A A  
<!DOCTYPE html SYSTEM "about:legacy-compat"> ? ? ? ? ? ? ? ?  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> Q Q Q Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> S S S S S A A A A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> S S S S S A A Q A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd"> S S S S S A A A A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> S S S S S A A A A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Q Q Q Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Q Q Q Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> S S A A A A A A Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> Q S A A A A A A Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Q Q Q Q A A A A Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> S S S S S A A A A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> S S S S S A A A A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> S S S S S A A A A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> S S A A A A A A Q
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">		 S S S S S A Q A Q
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">		 S S S S S A Q A Q
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">		 S S S S S A Q A Q
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">		 S S A A A A Q A Q
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN"> Q S S Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HyperText Markup Language//EN"> Q S S S S A A A Q
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HTML//EN"> S S S Q Q Q Q Q Q
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HyperText Markup Language//EN"> S S S S S A A A Q

PS：

　　Opera文档模式：http://www.opera.com/docs/specs/doctype/

　　Firefox文档模式：https://developer.mozilla.org/en-US/docs/Mozilla%27s_DOCTYPE_sniffing

　　IE8：http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx

DTD与模式的更多相关文章

  1. XML的验证模式

    XML文件的验证模式保证了XML文件的正确性,而比较常用的验证模式有两种:DTD和XSD. DTD与XSD区别 DTD(Document Type Definition)即文档类型定义,是一种XML约 ...

  2. Quirks模式是什么？

    什么是DOCTYPE: DOCTYPE,或者称为 Document Type Declaration(文档类型声明,缩写 DTD).通常情况下,DOCTYPE 位于一个 HTML 文档的最前面的 位置 ...

  3. 在XML里的XSD和DTD以及standalone的使用

    有关XML结构中的XSD和DTD以及standalone的使用 XmlDeclaration declare= document.CreateXmlDeclaration("1.0" ...

  4. DOCTYPE与浏览器模式详解（标准模式&混杂模式）

    关于渲染模式: 在多年以前(IE6诞生以前),各浏览器都处于各自比较封闭的发展中(基本没有兼容性可谈).随着WEB的发展,兼容性问题的解决越来 越显得迫切,随即,各浏览器厂商发布了按照标准模式(遵循各 ...

  5. 无废话XML--XML约束（DTD）

    基本术语     一.序言Prolog:包括XML声明(XML Declaration)和文档类型声明(Document Type Declaration).     二.良构(well-formed ...

  6. Doctype的作用?严格模式与混合模式,如何触发者这两种模式,区分它们有何意义?

    Doctype作用?严格模式与混合模式,如何触发者这两种模式,区分它们有何意义? 1.1 Doctype作用 <!DOCTYPE>声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该 ...

  7. DOCTYPE的作用以及标准模式和兼容模式的区别

    <!doctype>声明必须处于HTML文档的头部,在<html>标签之前,告知浏览器的解析器用什么文档标准解析这个文档.DOCTYPE不存在或格式不正确会导致文档以兼容模式呈 ...

  8. 【HTML&CSS】 第一章：DTD文档声明

    <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE> 声明不是 HTML 标签:它是指示 web 浏览器关 ...

  9. 浏览器Quirksmode(怪异模式)与标准模式

    由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同.在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为 ...

随机推荐

  1. python基础归结

    00.python程序格式 #开头的语句是注释,其他每一行都是一个语句. 语句以冒号(:)结尾时,缩进的语句视为代码块(没有C语言中{}区分代码块). 约定俗称, 4个空格缩进,Tab或空格均可以,但 ...

  2. Android训练课程(Android Training) - 构建你的第一个应用

    本文翻译自:https://developer.android.com/training/basics/firstapp/index.html 构建你的第一个应用(app) 欢迎来到安卓开发! 这个课 ...

  3. Ubuntu中Samba的安装配置和使用

    Samba服务在Ubuntu服务器版本中默认并没有安装. 1. Samba软件包的安装 使用源安装,在终端中输入如下命令: #sudo apt-get install samba#sudo apt-g ...

  4. Spring Cloud Config 配置高可用集群

    详细参考:<Sprin Cloud 与 Docker 微服务架构实战>p163-9.10节 spring cloud config 与 eureka 配合使用 我就不写了,请参见本书章节.

  5. redis连接超时问题排查

    连接池无法获取到连接或获取连接超时redis.clients.jedis.exceptions.JedisConnectionException: Could not get a resource f ...

  6. R语言中的factor

    对于初学者来说,R语言中的factor有些难以理解.如果直译factor为“因子”,使得其更加难以理解.我倾向于不要翻译,就称其为factor,然后从几个例子中理解: <span style=& ...

  7. 深入浅出 kvm qemu libvirt

    在所谓的kvm技术中,应用到的其实有2个东西:qemu+kvmkvm负责cpu虚拟化+内存虚拟化,实现了cpu和内存的虚拟化,但kvm不能模拟其他设备:qemu是模拟IO设备(网卡,磁盘),kvm加上 ...

  8. Mac下安装Pyqt

    1.安装sip brew install sip 2.安装pyqt brew install pyqt

  9. PoseNet: A Convolutional Network for Real-Time 6-DOF Camera Relocalization

    用卷积神经网络对相机位置和角度进行回归.

  10. if 结构和三目运算和switch语句

    if语句需要注意的地方: if判断只能接一个语句,存在多个语句时,用块语句表示{},若在if判断后 直接加“:”相当于if判断后加一个空语句,即使条件成立什么也不会干! 1. if的第一种形态(真假) ...