使用 Web 标准生成 ASP.NET 2.0 Web 站点

XHTML 和 DOCTYPE 切换

为 Web页指定 DOCTYPE 会影响浏览器呈现页的方式。Internet Explorer、Mozilla Firefox 和 Opera 全都支持一种名为“DOCTYPE 切换”(也叫“DOCTYPE 嗅探”)的功能。

引入 DOCTYPE 切换的目的是使浏览器能够正确地呈现符合标准的 Web 站点以及旧式 Web 站点。大多数 Web 站点被开发为呈现 HTML 页而不是 XHTML 页。浏览器通过判断是否存在 DOCTYPE 来确定何时应该使用标准来呈现页。

Internet Explorer 6+ 支持两种呈现模式,分别叫做 Quirks 模式和 Standards 模式。当 Internet Explorer 呈现包含有效 XHTML(或 HTML 4.0)DOCTYPE 的页时,它会以 Standards 模式呈现该页;否则,它会以 Quirks模式呈现该页(有关详细信息,请参阅 CSS Enhancements in Internet Explorer 6)。

Opera 浏览器 (Opera 7+) 支持与 Internet Explorer 相同的两种呈现模式:Quirks 和 Standards(有关详细信息,请参阅 http://www.opera.com/docs/specs/doctype/)。

Mozilla Firefox 1+ 支持三种呈现模式:Quirks 模式、Almost Standards 模式和 Standards 模式。Firefox 的Almost Standards 模式对应于 Internet Explorer 和 Opera 的 Standards 模式。当页包含有效的 XHTML 1.0 Transitional DOCTYPE(并且该页被分配为 text/html MIME 类型)时,Firefox 会以 Almost Standards 模式呈现该页。当页包含 XHTML 1.0 Strict 或 XHTML 1.1 DOCTYPE(或者该页被分配为 XML MIME 类型)时,该页将以 Standards模式呈现(有关详细信息,请参阅 http://www.mozilla.org/docs/web-developer/quirks/doctypes.html)。

可以通过临时向页中添加以下客户端脚本(该脚本在最新版本的 Internet Explorer、Firefox 和 Opera 中有效)确定浏览器的当前呈现模式。

<script type="text/javascript"> alert( document.compatMode ); </script>

您需要关心浏览器的呈现模式,因为它会影响将层叠样式表应用于该页的方式。如果将现有 HTML 页转换为 XHTML 页,那么在浏览器中打开它们时,它们可能看起来非常不同。

例如,Internet Explorer 以不同方式计算页元素的大小,这取决于呈现模式(它使用不同的 CSS Box Model)。在Quirks 模式下,元素的宽度是通过将元素的内容、内边距、边框和边距相加而计算得到的。在 Standards 模式下,元素的宽度是只考虑元素内容的宽度而计算得到的。

例如,考虑下列两个 <div> 标记。

<div style="width:400px;border:solid 1px black">

First Box

</div>

<div style="width:400px;border:solid 1px black;padding:10px">

Second Box

</div>

除了第二个 <div> 元素的附加内边距以外,这两个 <div> 元素是相同的。在 Quirks 模式(参见图 2)下,这两个<div> 元素看起来大小相同,因为在计算第二个 <div> 元素的宽度时考虑了它的附加内边距(这两个元素的总宽度为400px)。在 Standards 模式(参见图 3)下,第二个 <div> 元素看起来要比第一个 <div> 元素宽,因为在计算元素的宽度时未考虑内边距(这两个元素的总宽度大于 400px)。

图 2. Quirks 模式

图 3. Standards 模式

这只是 Quirks 模式下浏览器差异的一个示例。在 Quirks 模式下,每个浏览器都以相当不同的方式实现 W3C层叠样式表标准。有关切换到 Standards 模式的一个妙处在于,它强制几乎所有现代浏览器以非常类似的方式(不完全相同,但要好得多)解释 W3C标准。

如果希望 Web 页以相同方式出现在所有浏览器中,那么通过包含 XHTML 1.0 Transitional DOCTYPE 触发 Standards 模式(在 Internet Explorer 和 Opera 中)和 Almost Standards 模式(在 Firefox 中)是一个好主意。幸运的是,默认情况下,Visual Studio .NET 2005 和 Visual Web Developer 自动将该 DOCTYPE 添加到每个新的 ASP.NET 页中。

转发 XHTML 和 DOCTYPE 切换(MSDN)的更多相关文章

  1. 文档类型、DOCTYPE切换和浏览器模式

    DTD(文档类型定义)是一种机器可读的规则,它们定义XML或HTML的特定版本中允许有什么.不允许有什么.在解析网页时,浏览器将使用这些规则检查页面的有效性并且采取相应的措施.浏览器通过分析页面的DO ...

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

    关于网页中第一行<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  3. Doctype作用?严格模式与混杂模式如何区分?它们有何意义?

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

  4. DOCTYPE声明作用及用法详解

    一.浏览器呈现模式和doctype 有的网页是遵循标准而创作的,但也有很多不是.即使你不能创建遵循标准的网页,也希望浏览器根据标准来正确显示那些页.目前,大量网页充斥着大量非标准代码,它们仍能正常地工 ...

  5. <!DOCTYPE>

     定义和用法 所有浏览器都支持 <!DOCTYPE> 声明. <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!D ...

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

    !DOCTYPE !DOCTYPE是什么: 在所有 HTML 文档中规定 DOCTYPE 是非常重要的,这样浏览器就能了解预期的文档类型, 告诉浏览器要通过哪一种规范(文档类型定义 DTD)解析文档( ...

  7. 前端翻译:Activating Browser Modes with Doctype

    一.前言 原本备份: http://www.cnblogs.com/fsjohnhuang/p/3830623.html 由于本人英语能力有限,译本内容难免有误,望各位指正! 本译文不含附录部分,请知 ...

  8. doctype声明、浏览器的标准、怪异等模式

    doctype 标准(严格)模式(Standards Mode).怪异(混杂)模式(Quirks Mode),如何触发,区分他们有何意义? 触发标准模式 1.加DOCTYPE声明,比如:<!DO ...

  9. 有关doctype!!!

    浏览器呈现模式 现代浏览器包括不同的呈现模式,目的是既支持遵循标准的网页,也支持为老式浏览器而设计的网页.其中, Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 ...

随机推荐

  1. js 判断所选时间(或者当前时间)是否在某一时间段用于不同时间段显示不同的客服qq

    //qq交谈 var nowtimes= new Date(); var starttimes="16:30"; var endtimes="23:59"; v ...

  2. JS调用JCEF方法

    坐下写这篇文章的时候,内心还是有一点点小激动的,折腾了一个多星期,踩了一个又一个的坑,终于找到一条可以走通的路,内心的喜悦相信经历过的人都会明白~~~~~今儿个老百姓啊,真呀个真高兴啊,哈哈,好了,废 ...

  3. Hibernate之全面认识

    Hibernate体系架构 Hibernate通过配置文件管理底层的JDBC连接,将用户从原始的JDBC释放出来,使得用户无需再关注底层的JDBC操作,而是以面向对象的方式进行持久化操作.这种全面的解 ...

  4. NSDate和NSDateFormatter 相关应用代码示例

    此方法用来计算当前时间与目标时间的先后顺序: -(NSDate *)calculateTimeWithCurrentTime:(NSDate *)currentDate{ //将当前时间转为本地时区 ...

  5. laravel框架总结(十二) -- 关联关系

    这里我们users表对应的模型类名是users,大家特意注意下和user取名的不同 1.一对一关系 1>表A和表B的记录一一对应,比如一个用户对应一个社交账号 数据表的设计如下:   2> ...

  6. in_array,array_search的使用

    写一个数组里面有小写a-z 大写A-Z 以及数字,把相似的数字和字母都剔除     无论大小写:将括号内的数字剔除(0,o,2,Z,1,i) $arr1 = range("a", ...

  7. centos升级glibc(升级到2.14版)

    1.下载源码包 到http://ftp.gnu.org/gnu/glibc/下载glibc-2.14.tar.xz 2.解压 tar glibc-2.14.tar.gz 3.创建build目录 cd ...

  8. Jekyll教程——精心收藏

    以前总想搭建一个自己的个人网站,由于不懂php后台,所以在点点网开过自己的博客,后来慢慢向程序员转变,点点网的博客已经不能满足这个职业特定的需求,于是用worldpress搭建了自己的第一个网站,鼓捣 ...

  9. XAF点滴:很具体很用实用---处理三个小问题

    以下内容全部为web版本的老模板风格下完成. 一.在编辑状态的详细视图下打印报表. 有些时候,需要在编辑状态下直接打印报表内容,官方默认是不允许这样做的.用Reflector查看源码,可以看到: De ...

  10. Nodejs学习总结 -Express 登录注册示例(二)

    项目创建后,我们来做个登录注册实例,详细操作步骤如下. 1.新建项目demo ,具体操作步骤参考上一章内容 https://www.cnblogs.com/Anlycp/ 2.添加mysql和sess ...