怪异模式和严格模式(译注:一般称为标准模式:Standards Mode,下文中的严格模式都可以理解为标准模式)是浏览器解析CSS时的两种‘模式’。这篇文章将简单阐述这两种模式之间的差异。

译注:一个网页一般由两部分组成即:HTML(Hypertext Markup Language)和CSS(Cascade Style Sheets)。
HTML负责描述网页的结构和内容(如标题,导航栏等),而CSS则负责网页的表现(外观)(如背景颜色,字体样式等)。

问题的产生:

当Netscape4(译注:网景公司早期的浏览器)和IE4(微软公司早期的浏览器)实现CSS机制时,并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持,而IE4 虽然接近标准,但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题(bugs),但是依然延续CSS实现中的其它故障(主要是盒模型(box model)问题)。

为了保证自己的网站在不同的浏览器中都能正确展现,网页开发者不得不依据各个浏览器的自身的规范来使用CSS。因此大部分网站的CSS实现并未符合W3C的标准。

然而随着标准一致性变得越来越重要,浏览器开发商不得不面临一个艰难的抉择:逐渐遵循W3C的标准是前进的方向。但是改变现有CSS的实现,完整去遵循标准,会使许多网站或多或少受到破坏。如果浏览器突然以正确的方式解析现存的CSS,陈旧的网站显示必然受到影响。

因此立即遵循标准会产生问题,然而忽略标准则又会维持浏览器大战时(译注:微软和网景之间的一段竞争)所产生的混乱。

解决方案:

任何的解决方案必须跟随如下两个方面:

1:允许网站开发者能够选择他们所熟知的模式。

2:依然使用旧式规则显示陈旧的网站。

换句话说,所有的浏览器需要提供两种模式:怪异模式(即兼容模式)服务于旧式规则,严格模式服务于标准规则。Mac平台的IE浏览器最先实现这两种模式,Mozilla, Safari、Opera和Windows平台的IE6也相继实现了这两种模式。WIndows平台的IE5和Netscape4则只提供了怪异模式。

选择使用哪种模式需要一个触发器,而 “DOCTYP切换” 则用于此目的。依照标准,任何一个(X)HTML文档必须拥有一个DOCTYPE(译注:DTD(文档类型定义)是一组机器可读的规则,它们指示(X)HTML文档中允许有什么,不允许有什么,DOCTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明)用以告诉其他人这个文档的类型风格

1:产生于标准化浪潮以前的网页并没有DOCTYPE声明。因此'没有DOCTYPE'意味着触发怪异模式:既依据旧式的CSS规则渲染网页。

2:相反,如果开发者明确知道包含DOCTYPE,他们应该明白他们想要怎么做。因此大部分的DOCTYPE声明将触发严格模式:即依据标准的CSS规则渲染网页。

3:任何新的或未知的DOCTYPE将触发严格模式。

4:一些页面依据怪异模式而写,但是却包含DOCTYPE。这种情况下各个浏览器依据自己的DOCTYPE规则列表来触发怪异模式,参照这个浏览器比较图表 。

注意:你的网页并不一定要依据所选择的DOCTYPE去获得有效性验证,一个DOCTYPE标签足以触发严格模式。

我在大部分网页中使用如下的DOCTYPE。它除了声明我的网页是XHTML 1.0 过渡类型之外,还将在所有浏览器中触发“准严格模式”(译注:下文将介绍这个模式)

完美的解决方案?

就个人而言,我并不十分满意“DOCTYPE切换”方案。一个DOCTYPE所提供的信息是(X)HTML文档所拥有的类型风格,即文档的结构,而不应该提供任何关于文档表现(外观)的信息,因为那违反了CSS关于页面结构和表现分离的原则。

并发症:准严格模式

在早些时候,尝试使用严格模式总是会产生关于图片会突然获得旧式的底部边距,并且无法移除的讨论。产生这个现象的原因是严格模式将标签当成行内元素,这意味着一些空间将被保留给一些拥有”尾部“的字符如(g, j, q),而图片并没有“尾部”字符,所以这些空间将不会被使用,但是却依旧保留着。

解决办法是声明图片为块级元素{display:block}

浏览器厂商,尤其是Mozilla,认为这是一种产生困惑的情况,于是他们引入了“准严格模式”(译注:也称为准标准模式 Almost Standards Mode),这与严格模式一样,除了它将图片当作块级元素而不是行内元素。

Windows平台IE的特殊性 : XML声明

在Windows平台的IE6 浏览器中,微软实现了一个额外的规则:如果DOCTYPE声明在XML声明之后,将触发怪异模式。这样做是为了允许开发者在怪异模式下获得“有效的网页” (需要DOCTYPE)。下面是XML声明,你需要将它放在页面的开头,在DOCTYPE之前。

注意这种行为已经从IE7 中移除。

译注:Peter-Paul Koch在这篇文章后面列出了怪异模式和严格模式在不同浏览器中的一些重要表现,建议了解一下

Doctype作用?严格模式与混杂模式如何区分?它们有何意义?的更多相关文章

  1. 浅谈!DOCTYPE声明的作用?严格模式与混杂模式的区别?

    !DOCTYPE的作用: DOCTYPE是Document Type(文档类型)的缩写,<!DOCTYPE>声明必须是html文档的第一行,位于<html>标签之前.<! ...

  2. 文档声明(Doctype)和<!Doctype html>有何作用? 严格模式与混杂模式如何区分?它们有何意义?

    文档声明的作用: 文档声明是为了告诉浏览器,当前HTML文档使用什么版本的HTML来写的,这样浏览器才能按照声明的版本来正确的解析. <!doctype html> 的作用就是让浏览器进入 ...

  3. Doctype 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?

    Doctype:(Document Type)文档类型,它位于文档中最前面的位置,处于标签之前.如果你想制作符合标准的页面,一个必不可少的关键组成部分就是DOCTYPE的声明.确定了正确的Doctyp ...

  4. HTML:关于HTML的Doctype和严格模式与混杂模式

     DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档. Doctype可声明三种DTD类型,分别表示严格 ...

  5. 关于Doctype、严格模式与混杂模式

    <!Doctype> 文档声明,位于文档中的最前面的位置,处于<html>标签之前.此标签告知浏览器文档使用哪种HTML或XHTML规范. 用于告知浏览器以何种模式来渲染文档. ...

  6. web基础(四)严格模式与混杂模式

    web基础(四)严格模式与混杂模式 一.介绍 DOCTYPE 标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档.DO ...

  7. DOCTYPE声明的作用是什么?严格模式与混杂模式如何区分?

    HTML语言已经存在太久了,目前必然会有一些不同版本的文档存在,为了能够让浏览器清楚你的文档的版本类型和风格,需要在文档的起始用DOCTYPE声明制定当前文档的版本和风格.如果在网页中提供了版本信息, ...

  8. Doctype 文档类型,标准模式,混杂模式

    HTML4.01和XHTML1.0 基于 SGML,支持DTD声明,HTML5不是,但是需要 doctype 来规范浏览器的行为. 标准模式是指,DTD声明定义了标准文档的类型后,浏览器按W3C标准解 ...

  9. DOCTYPE与浏览器模式详解(标准模式&混杂模式)

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

随机推荐

  1. C# 给Word文档添加内容控件

    C# 给Word文档添加内容控件 在MS Word中,我们可以通过内容控件来向word文档中插入预先定义好的模块,指定模块的内容格式(如图片.日期.列表或格式化的文本等),从而创建一个结构化的word ...

  2. 父页面操作iframe子页面的安全漏洞及跨域限制问题

    一.父子交互的跨域限制 同域情况下,父页面和子页面可以通过iframe.contentDocument或者parent.document来交互(彼此做DOM操作等,如父页面往子页面注入css). 跨域 ...

  3. PHP实现全排列(递归算法)

    算法描述:如果用P表示n个元素的全排列,而Pi表示n个元素中不包含元素i的全排列,(i)Pi表示在排列Pi前面加上前缀i的排列,那么n个元素的全排列可递归定义为:    ① 如果n=1,则排列P只有一 ...

  4. 脚本化CSS类-HTML5 classList属性

    HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...

  5. Java设计模式——线程安全的单件模式

    单件模式,也称单例模式,用以创建独一无二的.只能有一个实例的对象. 单件模式的类图是所有模式的类图中最简单的--只有一个类.尽管从类设计的视角来看单件模式很简单,但是实现上还是会遇到一些问题,本文着重 ...

  6. MongoDB学习笔记(一) MongoDB介绍及安装(摘)

    MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSql数据库中比较热门的一种.它在许多场景下可用于替代传统的关系型数据库或键/值存储方式.Mongo使用C++开发.Mongo的官方网 ...

  7. 手把手教你用FineBI做数据可视化

    前些日子公司引进了帆软商业智能FineBI,在接受了简单的培训后,发现这款商业智能软件用作可视分析只用一个词形容的话,那就是“轻盈灵动”!界面简洁.操作流畅,几个步骤就可以创建分析,获得想要的效果.此 ...

  8. OC多态

    要点: 1.多种形态,引用的多种形态对于一个引用变量,可以指向任何类的对象.对于一个父类的引用(类与类之间有一种继承关系),可以指向子类,也可以指向本类,指向的类型不同.当通过此引用向对象发送消息,调 ...

  9. Android Weekly Notes Issue #233

    Android Weekly Issue #233 November 27th, 2016 Android Weekly Issue #233 本期内容包括: 用Mockito做RxJava的单元测试 ...

  10. lucene自定义过滤器

    先介绍下查询与过滤的区别和联系,其实查询(各种Query)和过滤(各种Filter)之间非常相似,可以这样说只要用Query能完成的事,用过滤也都可以完成,它们之间可以相互转换,最大的区别就是使用过滤 ...