HTML文档模式与盒模型

HTML文档根据文档顶部的doctype声明来决定渲染模式,有标准模式(Standards Mode)怪异模式(Quirks mode,或叫做混杂模式)两种模式。
IE5及以前默认总是表现为怪异模式,IE6~IE8遇到非正常声明或特定声明时也会进入怪异模式。

否则,如果有正确声明doctype并在顶端,则默认进入标准模式,即包括HTML5声明在IE6~IE8,也会进入标准模式,而非一定需要HTML4长长的声明。

而许多现代浏览器即使是怪异模式,表现也和标准模式是一致的。

IE6+进入怪异模式的条件:

1.IE6~IE8没有doctype的页面是在怪异模式下渲染。

2.在文档类型定义之前出现非空格和换行字符,浏览器也会激活怪异模式。

3.除上述两种情况外,有一些特殊声明时用来特定激活怪异模式的。

具体见下表,删减至只考虑中国市场常用浏览器(来自《Activating Browser Modes with Doctype》


Doctype


HTML5


IE 8, IE 9


IE 7


IE 6


None


Q


Q


Q


Q


<!DOCTYPE html>


S


S


A


A


<!DOCTYPE html SYSTEM "about:legacy-compat">


?


?


?


?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">


Q


Q


Q


Q


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">


S


S


A


A


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


S


S


A


A


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">


S


S


A


A


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


S


S


A


A


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


Q


Q


Q


Q


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


Q


Q


Q


Q


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


A


A


A


A


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">


A


A


A


A


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


Q


A


A


A


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


S


S


A


A


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">


S


S


A


A


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


S


S


A


A


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


A


A


A


A


<?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


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


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


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">


A


A


A


Q


<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">


S


Q


Q


Q


<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HyperText Markup Language//EN">


S


S


A


A


<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HTML//EN">


S


Q


Q


Q


<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HyperText Markup Language//EN">


S


S


A


A

标准模式与怪异模式下导致的和模型区别:

需要知道的是,盒模型差异是两种模式导致的最重要的区别之一,但是IE一些其他的BUG,即使是在标准模式下,仍然需要通过HACK解决,而并非处于标准模式下则没有BUG。

Box model :标准模式width=content,怪异模式width=content+padding+border

例外:即使是标准模式下,button总是应用border-box,现代浏览器为了表现一致,默认添加了box-sizing:border-box属性,故在button的高度上仍然要考虑border而影响的高度,即设置height=height+border*2。

另外,button在现代浏览器中总是表现为基于垂直对齐,在IE7~8中表现为顶部对齐,在IE6中表现为基线对齐,故需要设置vertical-align:middle初始化让所有表现一致。

参考自《Quirks mode and strict mode》

时间: 2024-10-26 12:16:28

HTML文档模式与盒模型的相关文章

DOCTYPE是什么鬼?文档模式又是什么鬼?

!DOCTYPE !DOCTYPE是什么: 在所有 HTML 文档中规定 DOCTYPE 是非常重要的,这样浏览器就能了解预期的文档类型, 告诉浏览器要通过哪一种规范(文档类型定义 DTD)解析文档(比如HTML或XHTML规范): !DOCTYPE声明不属于 HTML 标签:tag; 它是一条指令,告诉浏览器编写页面所用的标记的版本. HTML 4.01 中的 doctype 需要对 DTD 进行引用,因为 HTML 4.01 基于 SGML.而 HTML 5 不基于 SGML,因此不需要对

telerik 控件 SCRIPT5007: 无法获取未定义或 null 引用的属性“documentElement” (IE 文档模式)

IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode.所以为兼容性考虑,我们可能需要获取当前的文档渲染方式.document.compatMode正好派上用场,它有两种可能的返回值:BackCompat和CSS1Compat.BackCompat:标准兼容模式关闭.浏览器客

浅谈HTML文档模式

不知道爱多想的你有没有在编写HTML代码时思考过 <!DOCTYPE html> 或是这一长串看都看不懂的 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 的代码,它是做什么的,为什么要有这句话,这句话起什么作用,它和其他HTML代码有关吗?嘤嘤嘤我才不回告诉你在前端的面试题中会经常看到对这个知识点的提问,而我

文档模式与IE浏览器模式

一.IE浏览器的兼容性视图 兼容性视图是微软为了兼容基于其它网页标准开发的网站,确保广大互联网用户在浏览网页时不至于受困于网页显示混乱的问题,而专门为IE8增加的一项实用功能.当IE8检测到某网站不兼容时,地址栏右侧就会出现兼容性视图按钮,只需轻轻一点,大部分网页显示就会正常了.(网页会以IE7的代码规范来显示) 它引入重要的两个概念便是“浏览器模式”和“文档模式”: 注:也可按F12进入开发人员工具来查看当前页面的浏览器模式和文档模式 二.文档模式 指定IE页面排版引擎根据哪一个版本的方式来解

多文档模式(multi-document parrerns)

聚合操作模式(mget,bulk)APIS和单个操作和类似,不同的是,接受请求的node知道操作的document在那个shard上,他根据各个shard拆分总的multi-document请求到单个的multi-document,然后一起分发到各个node. 一旦负责请求的node从各个node收到响应,这个请求node就整理这些请求到一个响应体,返回给客户端. 下图是使用mget进行多文档检索: 步骤如下: 1:客户端发送mget请求到node1 2:node1根据shard拆分到多个mul

X-UA-Compatible IE 浏览器默认文档模式设置

制作网页的时候,IE8浏览器浏览页面的时候,有时候文档模式默认是IE7,导致IE8兼容性不是非常好.出现IE7应该出现的模式. 解决的方法例如以下: 在X-UA-Compatible中可用的方法有: <meta http-equiv="X-UA-Compatible" content="IE=5" > <meta http-equiv="X-UA-Compatible" content="IE=7" >

文档模式

在IE5.5引入了文档模式的概念.而这个概念是使用文档类型(doctype)来切换实现的.最初的两种文档模式是混杂模式和标准模式.混杂模式会让IE的行为与(包含非标准特性的)IE5相同,而标准模式会让IE的行为更加接近标准行为.虽然这两种模式主要影响css内容的呈现,但在某些情况下也会影响javascript的解释执行. 在IE引入文档模式的概念后,其他浏览器也纷纷效仿.在此之后,IE又提出一种所谓的准标准模式.这种模式下的浏览器特性有很多都是符合标准的,但也不尽然.不标准的地方主要体现在处理图

1关于script标签属性,注意点,浏览器文档模式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title></h

360浏览器遇到文档模式是IE7的解决办法

这段时间遇到了360浏览器在加载java项目时,默认的文档模式是IE7,使得网页加载下拉框出现问题. 解决的方法是: 在显示的jsp页面加上 <meta http-equiv="X-UA-Compatible" content="IE=edge"> <head> <title></title> <meta http-equiv="X-UA-Compatible" content="I