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

By | 07月04日
Advertisement

盒模型

前面提到,盒模型(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 盒模型

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

在 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 标准盒模型

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

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

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

图 5 IE 8 Standards Mode

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

图片元素的垂直对齐方式

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 概念

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

对于 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

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

图 8 IE 8 Standards Mode

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

<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

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

图 10 IE 8 Standards Mode

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

内联元素的尺寸

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

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

图 12 IE 8 Standards Mode

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

元素的百分比高度

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

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

图 14 IE 8 Standards Mode

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

元素溢出的处理

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

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

图 16 IE 8 Standards Mode

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

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/

Similar Posts:

  • 浏览器的怪异模式和标准模式的区别

    何时触发怪异模式和标准模式 浏览器根据doctype是否存在和哪种DOT格式来决定怪异模式还是标准模式,如果XHTML文档包含完整的DOCTYPE,那么它一般以标准模式呈现 对于html4.0文档,包含严格dtd的doctype和包含过渡dtd和URI的doctype常常导致页面以标准模式呈现 任何新的或位置的doctype将导致标准模式呈现 不存在doctype会导致怪异模式 但是有过渡dtd没有URI会导致页面以怪异模式呈现 doctype不存在或形式不正确也会导师html和xhtml文档以

  • 第一部分第二章 内核模式网络驱动器体系结构

    第二章 内核模式网络驱动器体系结构 这一章主要描述win2000操作系统和模式下的网络驱动器体系结构.这一章包含下面各节: Win2000网络体系和OSI模型(2.1节) NDIS网络驱动器(2.2节) TDI驱动器(2.3节) 网络驱动器环境(2.4节) 2.1 win2000网络体系结构和OSI模型 Win2000网络体系结构是基于由国际标准化组织(ISO)开发的7层网络模型而形成的.1978年以来,ISO开放系统互连(OSI)参考模型描述网络作为一个协议层系列,每一层指派一个特殊的函数集.

  • 十天学会web标准DIV CSS第二天 一列布局

    原文地址:十天学会web标准DIV CSS第二天一列布局作者:html 今天我们开始学习<十天学会web标准(div css)>的一列布局,包含以下几种形式: 一列固定宽度 一列固定宽度居中 一列自适应宽度 一列自适应宽度居中 一列二至多块布局 前一节我们回顾了xhtml基础和css基础部分,今天我们正式开始使用网页制作软件--adobe公司出品的dreamweaver来开始网页设计之旅.相信之前您已经用过这个软件了,具体怎么使用我就不讲了.为了照顾部分朋友,今天课程的css部分我们是以可视化

  • Gradle 1.12用户指南翻译——第二十二章. 标准的 Gradle 插件

    其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Github上的地址: https://github.com/msdx/gradledoc/tree/1.12. 直接浏览双语版的文档请访问: http://gradledoc.qiniudn.com/1.12/userguide/userguide.html. 另外,Android 手机用户可通过我写的一个程序浏览文档,带缓存功能的,兼容

  • 《head first html与css、xhtml》——第六章--标准,规范,第七章--XHTML

    2015-04-01 19:48:22 第六章--标准,规范 1.依据html 4.01严格的规范,内联元素必须包含在块元素中,当然,不这样做也能通过. 2.标准的网页加载速度更快,更容易在其他移动设备上运行好,同时,也容易被因视觉障碍而是用屏幕读取器的用户接受. 3.花时间去看错误的信息,你就会开始了解到他们的窍门. 4.只使用块元素填充<body>(<h1><h2>...<p><div><blockquote>..) 5.块元素在

  • 精通CSS与HTML设计模式 第二章(HTML设计模式)

    精通CSS与HTML设计模式 第一章(轻松搞定CSS) 精通CSS与HTML设计模式 第二章(HTML设计模式) 精通CSS与HTML设计模式 第三章(CSS选择符与继承) 精通CSS与HTML设计模式 第四章(CSS选择符与继承) 精通CSS与HTML设计模式 第六章(盒型模型属性) 精通CSS与HTML设计模式 第八章(盒型模型属性) 精通CSS与HTML设计模式 第九章(定位:进阶) 精通CSS与HTML设计模式 第十章(分割内容) 精通CSS与HTML设计模式 第十一章(对齐内容) 其余

  • apue学习第五天——UNIX标准及实现(第二章)

    第二章开始.但我对它不是很感兴趣,花了不到两个小时翻完了这些内容,简单记录一下吧. 首先是标准,它讲了三个标准,分别是ISO C, IEEE POSIX 和 SUS: 1)ISO C,ANSI(American National Standards Institution)是ISO(International Organization for Standardization)的美国代表,它的标准被ISO采纳成为ISO C标准.ISO C标准的意图是提供C程序的可移植性,使其能适合于大量的不同操作

  • 第二十四章 加薪非要老总批--责任链模式(读书模式)

    第24章 加薪非要老总批--责任链模式 24.1 老板,我要加薪!  今天小菜向经理提加薪申请,经理没权利,然后向总监上报,总监也没有权利,向总经理上报.其实这个就是一个责任链了. 24.2 加薪代码初步 #pragma once #include "Request.h" #include <iostream> class Manager { public: typedef enum _TypeManager { eManager, eMajordomo, eMasterM

  • 微信开发(从申请到上线的一整套流程)第二章 启用开发模式

    第二章 启用开发模式 微信公众平台开发模式 高级功能 微信公众平台地址:https://mp.weixin.qq.com 登录微信公众平台后台,在左侧列表中最下方,找到" 基本配置 ",点击进入 进入服务器配置填写框. 点击"修改配置"按钮 此处的URL为上篇中介绍的云应用的域名,而Token在index.php中定义为weixin.EncodingAESKey则不用填,点击"随机生成"让自动生成一个,消息加解密方式选择"明文模式&qu

  • 微机原理--第二章(2) 8086的引脚信号和工作模式

    1)最小模式和最大模式的概念 两种模式构成两种不同规模的应用系统 最小模式 构成小规模的应用系统(单处理器) 所有的总线控制信号由8086直接提供 最大模式 构成较大规模的应用系统(多处理器),例如可以接入数值运算协处理器8087.输入/输出协处理器8089 总线控制信号由总线控制器8288提供 两种模式利用MN/MX#引脚区别 MN/MX#接高电平为最小模式 MN/MX#接低电平为最大模式 两种模式下的内部操作并没有区别 2)基本引脚信号和功能 (1)AD0  AD15 地址/数据分时复用引

Tags: