【HTML&CSS】 第二章:标准模式下的页面与怪异模式下的页面区别

盒模型

前面提到,盒模型(box mode)是浏览器 Quirks Mode 和 Standards Mode 的主要区别。

描述

对于“盒模型”一词并没有明确的文档定义,它是开发人员描述 CSS 中块级元素的一种约定俗称。

具体而言,针对一个块级元素,如<p>、<div>、<span>等,CSS 的规范定义了一个宽度和高度,以及 3 个级别的环绕它的框 padding、border 和 margin 。这些属性我们可以把它转移到我们日常生活中的盒子上来理解,所以将这种模型称为盒模式。对于盒模型,针对高度和宽度的定义,不同浏览器的解释不同。

出于历史原因,早期的 IE 浏览器(IE 6 以前)将盒子的 padding 和 border 算到了盒子的尺寸中,这一模型被称为 IE 盒模型。该模型如图 2.1 所示,

图 2 IE 盒模型

图 2 IE 盒模型

在 IE 盒模型中,

box width = content width + padding left + padding right + border left + border right,

box height = content height + padding top + padding bottom + border top + border bottom,

而在 W3C 标准的盒模型中,box 的大小就是 content 的大小,如图 3 所示,

图 3 W3C 标准盒模型

图 3 W3C 标准盒模型

box width = content width,

box height = content height,

这一区别将导致页面绘制时所有的块级元素都出现很大的差别,所以两种不同的文档模式下的页面也区别很大。

示例展示

如下代码段所示,我们定义一个简单的 DIV 元素,设定其宽度和高度分别为 500px,定义 border 为 50px,红色。

清单 1
div.a{
	width:500px;
	height:500px;
	border:50px;
	border-style:solid;
	border-color:red;
}

分别在 IE 5 Quirks Mode 和 IE 8 Standards Mode 下运行,结果如图 4 和 5 所示。明显可以看到,在 Standards Mode 下的 DIV 要大于 Quirks Mode,其实际渲染大小为 600px*600px。

图 4 IE 5 Quirks Mode

图 4 IE 5 Quirks Mode

图 5 IE 8 Standards Mode

图 5 IE 8 Standards Mode

图片元素的垂直对齐方式

CSS 中 vertical-align 属性用于设置或检索对象内容垂直对齐方式,该属性定义行内元素的 base line 相对于该元素所在行的 base line 的垂直对齐。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。其取值可以为 baseline,sub,supper,top,text-top,bottom,text-bottom,middle 等。什么是 baseline 和 bottom,它们有何区别?下面我们通过一副图来进行解释。

描述

CSS 为了确定文字行的位置,定义如下概念描述,base line,bottom line,top line, middle line。其中,base line 指的是一行字横排时下沿的基础线,baseline 并不是汉字的下端沿,而是英文字母 e 的下端沿,bottom line,指的是汉字,或者英文字母 p,g 的下端沿。如下图 6 所示。

图 6 base line 概念

图 6 base line 概念

对于 inline 元素和 table-cell 元素,在 IE Standards Mode 下 vertical-align 属性默认取值为 baseline。而当 inline 元素的内容只有图片时,如 table 的单元格 table-cell。在 IE Quirks Mode 下,table 单元格中的图片的 vertical align 属性默认为 bottom,因此,在图片底部会有几像素的空间。

示例展示

如下代码段所示,我们定义一行两列的 table,table 单元格设定为宽度和高度均为 200px 的 img 图片,为了突出显示区别,分别定义单元格与图片的边框颜色为蓝色和橘色。

清单 2
td.a
{
	border-style:solid;
	border-color:blue;
}

img.c
{
	width:200px;
	height:200px;
	border-style:solid;
	border-color:orange;
}

分别在 IE 10 Quirks Mode 和 IE 8 Standards Mode 下运行,结果如图 7 和 8 所示。在 Quirks Mode 下,table 单元格中的图片与单元格底部对齐,而在 Standards Mode 下,图片与单元格之间多了 3 个像素的空间。

图 7 IE 10 Quirks Mode

图 7 IE 10 Quirks Mode

图 8 IE 8 Standards Mode

图 8 IE 8 Standards Mode

<table>元素中的字体

CSS 中,描述 font 的属性有 font-family,font-size,font-style,font-weight,分别表示了 font 的族系、大小、风格以及粗细。

描述

在 CSS 标准中,上述属性都是可以继承的。而在 IE Quirks Mode 下,对于 table 元素,字体的某些属性将不会从 body 或其他封闭元素继承到 table 中,特别是 font-size 属性。

示例展示

如下代码段所示,我们定义 body 的 font 属性为斜体、红色、加粗、fantasy 字体,对于 table 元素,未定义其 font 属性。

清单 3
body
{
	font-style:italic;
	color:red;
	font-size:200%;
   font-weight:bold;
	font-family: fantasy;
}

分别 IE 5 Quirks Mode 和 IE 8 Standards Mode 下运行,结果如图 9 和 10 所示。在 Quirks Mode 下,table 单元格中字体的 font-size,font-style,font-weight 属性不会继承 body,只有 family 属性会被继承。而在 Standards Mode 下,所有属性都被继承。

图 9 IE 5 Quirks Mode

图 9 IE 5 Quirks Mode

图 10 IE 8 Standards Mode

图 10 IE 8 Standards Mode

内联元素的尺寸

CSS 中常见的元素有两类,分别是 block(块级)元素及 inline(内联)元素。这两类元素的主要区别在于 block 元素通常作为独立的一块继续显示,前后都有换行,而 inline 元素则不会产生换行。根据 CSS 标准,对于 inline 元素,又可以分为 replaced 和 non-replaced 两类。

描述

什么是 non-replaced inline 元素?首先,我们解释下 non-replaced 元素,对于 HTML 中定义的元素,默认具有 CSS 格式化外表范围的元素,比如 img 元素,有自己的宽和高,我们称其为 replaced 元素,其他例 input,textarea,select,object,等都是 replaced 元素。除了这些元素之外的元素就是 non-replaced 元素。因此,具有 non-replaced 属性的 inline 元素即为 non-replaced inline 元素,如 span 元素。

在 IE Standards Mode 下,non-replaced inline 元素无法自定义大小,而在 IE Quirks Mode 下,定义这些元素的 width 和 height 属性,能够影响该元素显示的大小尺寸。

示例展示

如下代码段所示,为了突出显示,我们定义一个背景色为橘色的 div 中嵌套一个 span 元素,该 span 元素的高和宽均为 200px,背景色为蓝色。

清单 4
div.a
{
	width:300px;
	height:300px;
	background-color:orange;
}

span.b
{
	height:200px;
	width:200px;
	background-color:blue;
}

分别在 IE 5 Quirks Mode 和 IE 8 Standards Mode 下运行,结果如图 11 和 12 所示。在 Quirks Mode 下,span 元素能够正常显示,左图中 200*200 的蓝色的区块。而在 Standards Mode 下,span 尺寸为零。

图 11 IE 5 Quirks Mode

图 11 IE 5 Quirks Mode

图 12 IE 8 Standards Mode

图 12 IE 8 Standards Mode

元素的百分比高度

CSS 中对于元素的百分比高度规定如下,百分比为元素包含块的高度,不可为负值。如果包含块的高度没有显式给出,该值等同于“auto”(即取决于内容的高度)。所以百分比的高度必须在父元素有声明高度时使用。

描述

当一个元素使用百分比高度时,在 IE Standards Mode 下,高度取决于内容的变化,而在 Quirks Mode 下,百分比高度则被正确应用。

示例展示

如下代码所示,为了突出显示,我们定义一个背景为粉色的 table,在 table 的单元格中嵌入一个背景为橘色的 div b,将该 div 的高度设置为 90%。定义 b 的子节点 c 为高度和宽度均为 200px 的 div 元素,背景为蓝色。

清单 5
table.a
{
	height:500px;
	background-color:pink;
}
div.b
{
	background-color:orange;
	width:300px;
	height:90%;
	display:block;
}
div.c
{
	width:200px;
	height:200px;
	background-color:blue;
}

分别在 IE 5 Quirks Mode 和 IE 8 Standards Mode 下运行,结果如图 13 和 14 所示。在 Quirks Mode 下,div b 的高度为 talle 单元格的 90%,而在 Standards Mode 下,div b 的高度由其子节点 c 决定,为 200px。

图 13 IE 5 Quirks Mode

图 13 IE 5 Quirks Mode

图 14 IE 8 Standards Mode

图 14 IE 8 Standards Mode

元素溢出的处理

CSS 中 overflow 属性定义了一个元素的内容不适合指定的尺寸时,溢出元素内容的处理方式。默认值为 visible,即显示溢出。

描述

在 IE Standard Mode 下,overflow 取默认值 visible,即溢出可见,这种情况下,溢出内容不会被裁剪,呈现在元素框外。而在 Quirks Mode 下,该溢出被当做扩展 box 来对待,即元素的大小由其内容决定,溢出不会被裁剪,元素框自动调整,包含溢出内容。

示例展示

如下代码段所示,我们定义一个背景为蓝色的 div a,在 a 中嵌入一个背景为橘色的 div b,设置 b 的高度 400px 大于 a 的高度 300px,使 a 发生溢出。

清单 6
div.a
{
	width:300px;
	height:300px;
	background-color:blue;
}

div.b
{
	width:200px;
	height:400px;	
	background-color:orange;
}

分别在 IE 5 Quirks Mode 和 IE 8 Standards Mode 下运行,结果如图 15 和 16 所示。在 Quirks Mode 下,div a 的高度为又 300px 变为 400px,以适应 b 的大小,而在 Standards Mode 下,div a 的大小保持不变,溢出部分保留。

图 15 IE 5 Quirks Mode

图 15 IE 5 Quirks Mode

图 16 IE 8 Standards Mode

图 16 IE 8 Standards Mode

 

X-UA-Compatible是针对ie8新加的一个设置,对于ie8之外的浏览器是不识别的,这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE>指令,都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。对于多数网站来说,它是首选的兼容性模式。

目前IE8尚在测试版中,所以为了避免制作出的页面在IE8下面出现错误,建议直接将IE8使用IE7进行渲染。也就是直接在页面的header的meta标签中加入如下代码:

 

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

 

这样我们才能使得页面在IE8里面表现正常!

浏览器市场份额的激烈竞争,给网页设计开发人员带来了兼容性设计的麻烦。单单 IE 浏览器就有好几个主流版本,IE6、IE7、IE8 等等。当然使用诸如 IETester,多版本 IE 共存解决方案之类的第三方集成工具,可以方便代码调试。但我们总需要找寻一种更为省时省力的方法。

X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记,用于为 IE8 指定不同的页面渲染模式。由于当下 IE6 和 IE7 使用率依然较高,综合考虑,启用 IE8 版本的 X-UA-Compatible 兼容模式显得相当重要。

各种兼容模式代码示例如下:

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

 

像是使用了 Windows Internet Explorer 7 的 Quirks 模式,这与 Windows Internet Explorer 5 显示内容的方式很相似。

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

 

无论页面是否包含 <!DOCTYPE> 指令,均使用 Windows Internet Explorer 7 的标准渲染模式。

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

 

开启 IE8 的标准渲染模式,但由于本身 X-UA-Compatible 文件头仅支持 IE8 以上版本,因此等同于冗余代码。

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

 

Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容,这实际上破坏了“锁定”模式。

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

 

EmulateIE7 模式通知 Windows Internet Explorer 使用 <!DOCTYPE> 指令确定如何呈现内容。标准模式指令以Windows Internet Explorer 7 标准模式显示,而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同,EmulateIE7 模式遵循 <!DOCTYPE> 指令。对于多数网站来说,它是首选的兼容性模式。

在现阶段,IE8 版本推向市场没有多久,份额不高。因此,考虑兼容旧版本的模式值得推荐。

 

参考:http://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/

posted @ 2014-04-08 20:19  琅琊丶  阅读(292)  评论(0编辑  收藏  举报