Doctype作用?严格模式与混杂模式如何区分?它们有何意义?
怪异模式和严格模式(译注:一般称为标准模式: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作用?严格模式与混杂模式如何区分?它们有何意义?的更多相关文章
- 浅谈!DOCTYPE声明的作用?严格模式与混杂模式的区别?
!DOCTYPE的作用: DOCTYPE是Document Type(文档类型)的缩写,<!DOCTYPE>声明必须是html文档的第一行,位于<html>标签之前.<! ...
- 文档声明(Doctype)和<!Doctype html>有何作用? 严格模式与混杂模式如何区分?它们有何意义?
文档声明的作用: 文档声明是为了告诉浏览器,当前HTML文档使用什么版本的HTML来写的,这样浏览器才能按照声明的版本来正确的解析. <!doctype html> 的作用就是让浏览器进入 ...
- Doctype 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
Doctype:(Document Type)文档类型,它位于文档中最前面的位置,处于标签之前.如果你想制作符合标准的页面,一个必不可少的关键组成部分就是DOCTYPE的声明.确定了正确的Doctyp ...
- HTML:关于HTML的Doctype和严格模式与混杂模式
DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档. Doctype可声明三种DTD类型,分别表示严格 ...
- 关于Doctype、严格模式与混杂模式
<!Doctype> 文档声明,位于文档中的最前面的位置,处于<html>标签之前.此标签告知浏览器文档使用哪种HTML或XHTML规范. 用于告知浏览器以何种模式来渲染文档. ...
- web基础(四)严格模式与混杂模式
web基础(四)严格模式与混杂模式 一.介绍 DOCTYPE 标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档.DO ...
- DOCTYPE声明的作用是什么?严格模式与混杂模式如何区分?
HTML语言已经存在太久了,目前必然会有一些不同版本的文档存在,为了能够让浏览器清楚你的文档的版本类型和风格,需要在文档的起始用DOCTYPE声明制定当前文档的版本和风格.如果在网页中提供了版本信息, ...
- Doctype 文档类型,标准模式,混杂模式
HTML4.01和XHTML1.0 基于 SGML,支持DTD声明,HTML5不是,但是需要 doctype 来规范浏览器的行为. 标准模式是指,DTD声明定义了标准文档的类型后,浏览器按W3C标准解 ...
- DOCTYPE与浏览器模式详解(标准模式&混杂模式)
关于渲染模式: 在多年以前(IE6诞生以前),各浏览器都处于各自比较封闭的发展中(基本没有兼容性可谈).随着WEB的发展,兼容性问题的解决越来 越显得迫切,随即,各浏览器厂商发布了按照标准模式(遵循各 ...
随机推荐
- ArrayAdapter
Android Adapter:ArrayAdapter篇 版权声明:本文为博主原创文章,未经博主允许不得转载.微博:厉圣杰源码:AndroidDemo/Notification文中如有纰漏,欢迎大家 ...
- 计算机程序的思维逻辑 (50) - 剖析EnumMap
上节我们提到,如果需要一个Map的实现类,并且键的类型为枚举类型,可以使用HashMap,但应该使用一个专门的实现类EnumMap. 为什么要有一个专门的类呢?我们之前介绍过枚举的本质,主要是因为枚举 ...
- AFNetworking 3.0 源码解读(五)之 AFURLSessionManager
本篇是AFNetworking 3.0 源码解读的第五篇了. AFNetworking 3.0 源码解读(一)之 AFNetworkReachabilityManager AFNetworking 3 ...
- .NET正则表达式基础入门(四)
断言 判断某个位置左侧或者右侧是否符合匹配.常见断言有三种,单词边界.行起始/结束位置.环视.阅读本章前,建议先下载我于CSDN上传的示例代码,下载无需分数,下载链接. 1.单词边界 正则表达式&qu ...
- C#开发微信门户及应用(5)--用户分组信息管理
在上个月的对C#开发微信门户及应用做了介绍,写过了几篇的随笔进行分享,由于时间关系,间隔了一段时间没有继续写这个系列的博客了,并不是对这个方面停止了研究,而是继续深入探索这方面的技术,为了更好的应用起 ...
- SpringMVC传值、转发、重定向例子
练习接收页面参数值 使用request 使用@RequestParam注解 使用实体对象 练习向页面传出数据 使用HttpServletRequest和session 使用ModelAndView对象 ...
- Spring+SpringMVC+Hibernate简单整合(转)
SpringMVC又一个漂亮的web框架,他与Struts2并驾齐驱,Struts出世早而占据了一定优势,下面同样做一个简单的应用实例,介绍SpringMVC的基本用法,接下来的博客也将梳理一下Str ...
- Oracle安装
1.根据自己的操作系统,到Oracle官网下载相应的安装包 下载地址:http://download.oracle.com/otn/nt/oracle11g/112010/win32_11gR2_cl ...
- SAP GUI的配置文件
GUI是SAP系统最常用的客户端,在一台客户机上,利用GUI可以连接多套SAP系统(连接方法参见<客户端连接配置(SAP GUI 710)>),也可以设置多个快捷方式登录(参见<用快 ...
- 【容器云】传统金融企业的 Docker 实践
基于 Docker 的容器云-Padis 目前市面上基于容器云的产品有很多,对于平安而言,则是基于 Docker 的 Padis 平台.所谓 Padis,全称是 PingAn Distribution ...