关于浏览器的怪异模式要注意的地方
- - jackyrong 发现IE 9和8下(自己用的是ie 10)在浏览某些页面的时候,发现F12时文档模式那里,用的是. QUICK模式,原来这个叫怪异模式,摘录下定义,详细见:. 先看看什么是quirk模式，引用一段：http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true.
关于浏览器的怪异模式要注意的地方
标签：
浏览器
怪异模式
注意
| 发表时间：2013-08-21 19:40 | 作者：
出处：http://jackyrong.iteye.com
发现IE 9和8下(自己用的是ie 10)在浏览某些页面的时候,发现F12时文档模式那里,用的是
QUICK模式,原来这个叫怪异模式,摘录下定义,详细见:
http://zh.wikipedia.org/zh-cn/%E6%80%AA%E5%BC%82%E6%A8%A1%E5%BC%8F
先看看什么是quirk模式，引用一段：http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true
复制代码
为 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 模式下，元素的宽度是只考虑元素内容的宽度而计算得到的。
复制代码
Quirks模式与Standards模式的区别
quirks和standards的区别很多都可以归为IE5和IE6的区别。
盒模型的高宽包含内补丁和边框
在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks模式下，IE的宽度和高度还包含了padding和border。IE5.5及以下的浏览器即使在Standards模式下，也会有这个问题
可以设置行内元素的高宽
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效
可设置百分比的高度
在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的
用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:
body{text-align:center};#{content:text-align:left}
设置图片的padding会失效
Table中的字体属性不能继承上层的设置
white-space: pre会失效
--------------------------------------------------
当微软开始产生与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们IE6.0以后的版本在浏览器内嵌了两种表现模式： Standards Mode（标准模式或Strict Mode）和Quirks mode（怪异模式或兼容模式Compatibility Mode）。在标准模式中，浏览器根据W3C所定的规范来显示页面；而在怪异模式中，页面将以IE5，甚至IE4的显示页面的方式来表现，以保持以前的网 页能正常显示。
对于这两种模式引起最大的问题就是盒模式的问题，或者现在大家已经忽视了IE5的存在，但是，IE在怪异模式运行的盒模式依然在最新版本的IE7保留着，一旦应用不得当，IE7将变成跟IE5一样愚蠢。
当然，不只IE浏览器存在两种模式。
Opera 浏览器 (Opera 7~8) 支持与 IE 相同的两种呈现模式：Quirks Mode和 Standards Mode（有关详细信息，请参阅 http://www.opera.com/docs/specs/doctype/），但是Opera9的Quirks Mode又不与之前的Quirks Mode呈现不一样，比如不再兼容IE5那种盒模式。
Mozilla Firefox 1+ 支持三种呈现模式：Quirks Mode、Almost Standards Mode（几乎标准的模式）和 Standards Mode。Firefox 的 Almost Standards 模式对应于 IE 和 Opera 的 Standards 模式。其中的Almost Standards Mode，除了在处理表格的方式方面有一些细微的差异之外，这种模式与标准模式基本相同。对于进入Quirks Mode的可参考http://www.mozilla.org/docs/web-developer/quirks/doctypes.html）
----------------------------------
为了解决这个问题,能让用户浏览页面的时候默认就使用标准模式,则需要声明好DTD就可以了,使用的是:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 就可以了
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
QUICK模式,原来这个叫怪异模式,摘录下定义,详细见:
http://zh.wikipedia.org/zh-cn/%E6%80%AA%E5%BC%82%E6%A8%A1%E5%BC%8F
先看看什么是quirk模式，引用一段：http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true
复制代码
为 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 模式下，元素的宽度是只考虑元素内容的宽度而计算得到的。
复制代码
Quirks模式与Standards模式的区别
quirks和standards的区别很多都可以归为IE5和IE6的区别。
盒模型的高宽包含内补丁和边框
在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks模式下，IE的宽度和高度还包含了padding和border。IE5.5及以下的浏览器即使在Standards模式下，也会有这个问题
可以设置行内元素的高宽
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效
可设置百分比的高度
在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的
用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:
body{text-align:center};#{content:text-align:left}
设置图片的padding会失效
Table中的字体属性不能继承上层的设置
white-space: pre会失效
--------------------------------------------------
当微软开始产生与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们IE6.0以后的版本在浏览器内嵌了两种表现模式： Standards Mode（标准模式或Strict Mode）和Quirks mode（怪异模式或兼容模式Compatibility Mode）。在标准模式中，浏览器根据W3C所定的规范来显示页面；而在怪异模式中，页面将以IE5，甚至IE4的显示页面的方式来表现，以保持以前的网 页能正常显示。
对于这两种模式引起最大的问题就是盒模式的问题，或者现在大家已经忽视了IE5的存在，但是，IE在怪异模式运行的盒模式依然在最新版本的IE7保留着，一旦应用不得当，IE7将变成跟IE5一样愚蠢。
当然，不只IE浏览器存在两种模式。
Opera 浏览器 (Opera 7~8) 支持与 IE 相同的两种呈现模式：Quirks Mode和 Standards Mode（有关详细信息，请参阅 http://www.opera.com/docs/specs/doctype/），但是Opera9的Quirks Mode又不与之前的Quirks Mode呈现不一样，比如不再兼容IE5那种盒模式。
Mozilla Firefox 1+ 支持三种呈现模式：Quirks Mode、Almost Standards Mode（几乎标准的模式）和 Standards Mode。Firefox 的 Almost Standards 模式对应于 IE 和 Opera 的 Standards 模式。其中的Almost Standards Mode，除了在处理表格的方式方面有一些细微的差异之外，这种模式与标准模式基本相同。对于进入Quirks Mode的可参考http://www.mozilla.org/docs/web-developer/quirks/doctypes.html）
----------------------------------
为了解决这个问题,能让用户浏览页面的时候默认就使用标准模式,则需要声明好DTD就可以了,使用的是:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 就可以了
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
相关 [浏览器 怪异模式 注意] 推荐：
android开发中WebView控件的实例与注意要点——个人主页浏览器简易实现
- - 浏览器 - 互联网 - ITeye博客 在Android开发中往往需要实现网页的浏览，webview就是android开发控件中功能极其强大的一员，它完全可以充当一个简易的浏览器，能够自己设置主页. 试想，用自己开发的app把主页设成自己技术博客地址，一打开便进入了自己的空间，何其的方便. 在webview使用中有以下几点需要注意：.
怪异模式（Quirks Mode）对 HTML 页面的影响
- - Web前端 - ITeye博客怪异模式（Quirks Mode）对 HTML 页面的影响. Quirks Mode 概述. 什么是 Quirks Mode. 简单来说，Quirks Mode 就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式. 由渲染引擎产生的两种文档模式.
Silk 浏览器：Google? No!
- 橙子 - 爱范儿 · Beats of Bits前苹果员工， Blogger Chris Espinosa 指出， Amazon 的 Silk 浏览器技术，让 Amazon 不能把自己置于 Google 的控制之下. Silk 在云端为用户组织和优化网页，之后再下载到本地. 这样做的结果是， Amazon 能掌握用户在网络上的一举一动. 不仅仅包括在 Amazon.com 下的订单.
浏览器检测
- - JavaScript - Web前端 - ITeye博客1.navigator 对象. 由于每个浏览器都具有自己独到的扩展， 所以在开发阶段来判断浏览器是一个非常重要的步骤. 虽然浏览器开发商在公共接口方面投入了很多精力， 努力的去支持最常用的公共功能；但在现实中，浏览器之间的差异，以及不同浏览器的“怪癖”却是非常多的，因此客户端检测除了是一种补救措施，更是一种行之有效的开发策略.
浏览器缓存机制
- Leo Pay - Learning Correcting ImprovingCache-Control 是最重要的规则. 这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令. 这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为. 缓存指令是单向的，即请求中存在一个指令并不意味着响应中将存在同一个指令. cache-control 定义是：Cache-Control = "Cache-Control" ":" cache-directive.
浏览器进化史
- Hao Zeng - 爱范儿 · Beats of Bits这张图非常直观，纵轴是浏览器存在的时间线，横轴代表使用此浏览器的用户数量. 出现在图片中的浏览器包括：Netscape、Opera、IE、Firefox、Safari 和 Chrome. Netscape：1994 年诞生，1995 年用户基数达到最大（2.x 版本）. 1998 年 Netscape 被创业杀手 AOL 收购，再加上微软的冲击，逐渐走向衰败，2008 年彻底终结.
百度浏览器评测
- 溪梦 - 月光博客 百度今年在客户端方面的动作不断，目前已经推出了百度输入法、百度电脑管家、百度安全卫士、百度影音，百度压缩软件，而现在，百度客户端领域的重要产品百度浏览器已经进入了测试阶段，不久后将正式对外发布. 百度在其公关稿里称：“百度浏览器具备以下几点特性：第一，整合百度平台的热门应用，使用户一键触达；第二，采用沙箱安全技术将用户电脑与病毒木马隔离；第三，融合百度搜索技术的智能地址栏；第四，界面设计简洁易操作……百度希望通过浏览器的改进，推动互联网的良性发展，吸引更多的用户来使用互联网，增进使用的频度与时长，最终推动搜索这个媒体平台的发展和巩固.
最新浏览器评测
- John - SolidotTom's Hardware发布了最新的浏览器评测，在Windows 7 和Mac OS X Lion系统上分别对Chrome 13、Firefox 6、IE9、Opera 11.50和Safari 5.1执行了近40项测试. 测试结果是：Windows 7上的排名依次是Chrome 13、Firefox 6、IE9、Opera 11.50，Safari 5.1；Mac OS X上是Safari，Chrome，Opera，Firefox.
appcache的浏览器限制
- - 前端观察appcache(之前的manifest)是html5的一个特性，用来实现浏览器端的资源缓存，是webapp的一个重要工具. 虽然大部分浏览器的最新版都它提供了支持，但是各浏览器的实现却有些差异，我们来看一下~~. 数据来源： browserscope. 可以看出，桌面端的浏览器除了IE10都没有限制，移动端的基本都有各种限制.