调试一个页面，ie下面页面css样式很是奇怪，各种失效。找了半天原因不知道怎么回事。最后在调试工具中发现，文档模式为quirk，改成别的(IE 7|8|9)正常。

为什么会自动选择此文档模式呢？

先看看什么是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会失效
许多CSS默认样式将不同
　　在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效
这些都不用怎么去管了，以前的版本谁在意呢。如何避免默认quirk模式呢，一是设置doctype，二是doctype前不允许有任何字符（空字符除外），因为一旦发现有字符在文档首浏览器将会输出其在body并将字符与<HTML>之间的标记<!***>用<!---->注释起来，那么文档内容将无doctype设置。
这里测试的仅为IE9，其他浏览器未知。

转自：http://www.cnblogs.com/zaric/archive/2011/11/25/2263139.html

坑爹的IE quirk模式【转】的更多相关文章

  1. IE 坑爹的浏览器兼容模式

    作为作为Web的前端开发人员,最悲催的莫过于要不断的,不断的去调试各种浏览器的显示效果,个人比较喜欢用火狐浏览器来做开发和调试,对于不怎么懂CSS的我来说,IE的样式调整一看就头大了.对于没有美工的团 ...

  2. DOCTYPE是什么鬼？文档模式又是什么鬼？

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

  3. HTML文档类型DTD与浏览器怪异模式

    虽然在兼容IE6时候经常会注意到两个模式的区别,但是系统的理解起来,还没有认真总结过.看了一些网上的资料.结合自己的理解汇总了一下,放在这里备忘并分享给大家. 浏览器从服务端获取网页后会根据文档的DO ...

  4. 文档类型DTD，DOCTYPE和浏览器模式

    出处:http://blog.csdn.net/freshlover/article/details/11616563 浏览器从服务端获取网页后会根据文档的DOCTYPE定义显示网页,如果文档正确定义 ...

  5. 浏览器Quirksmode(怪异模式)与标准模式

    由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同.在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为 ...

  6. offsetHeight, clientHeight与scrollHeight的区别

      在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论.以下结论皆是在标准模式下测试通过的,没有测试quirk模式. clientHeight 大部分浏览器对 clientHe ...

  7. Win8 传统桌面下无法上网的解决方法

    Win8 很酷,就连出现的问题也都酷得不行~ 之前遇到的一些问题与解决方法,避免重新安装 1. Word 2013下, 输入法突然秀逗, 经常按了一个键后, 死循环输入该字符直到死机 解决方法: 进入 ...

  8. 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.

    笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是H ...

  9. jQuery1.4源码解读

    来吧, 慢慢折腾吧 总结一下: jq1.4挺简单的, 正则写的不多, 看的都懂, 多写一些 三目写法到底要不要 特殊的地方的注释一定要有 /*! * jQuery JavaScript Library ...

随机推荐

  1. 5.MVC框架开发（强类型开发，控制器向界面传递数据的几种方法）

    界面表单中的表单元素名字和数据库表的字段名相一一映射(需要哪个表的数据就是那个表的模型(Model)) 在View页面中可以指定页面从属于哪个模型 注:以上的关系可以通过MVC的强类型视图开发来解决我 ...

  2. ASP.NET MVC Razor视图(2)

    昨天介绍了一些Razor的基本语法,几天接着向下说: 补成一个,上次介绍了怎么输出原样的文本,用<text></text>标签,下面再介绍一种语法: @{@:我爱北京}  这个 ...

  3. spring IOC源码分析（3）

    1.IOC容器的依赖注入 Spring中,依赖注入是在用户第一次向IOC容器索要Bean时触发的(通过getBean方法). 在BeanFactory中我们看到getBean(String…)函数,它 ...

  4. Load a script file in sencha, supports both asynchronous and synchronous approaches

    //http://www.sencha.com/forum/showthread.php?188318-Ext.Loader.loadScriptFile-wrong-URL Ext.Loader.l ...

  5. hdu 1828 Picture(线段树 || 普通hash标记)

    http://acm.hdu.edu.cn/showproblem.php?pid=1828 Picture Time Limit: 6000/2000 MS (Java/Others)    Mem ...

  6. CSS3学习之 animation 属性

    发现animation这个新属性很有趣,在此学习,并整理下!  浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...

  7. DataGridView自动行号

    最近又用了一下DataGridView控件,需要显示行号,我们知道在.net中DataGridView控件默认是不显示行号(数据的记录行数)的,后来通过查资料发现可以在DataGridView控件的R ...

  8. Excel技巧收录

    帮老婆弄Excel,自己也把学到的东西记录下,免得以后被问到又给忘了 数据透视,需先在数据透视区域加上表头,如公司名称.销量等,Excel数据透视默认将选择区域的第一行作为表头 VLOOKUP,VLO ...

  9. java常见内存溢出(OOM)

    jvm内存区域 程序计数器一块很小的内存空间,作用是当前线程所执行的字节码的行号指示器. java栈与程序计数器一样,java栈(虚拟机栈)也是线程私有的,其生命周期与线程相同.通常存放基本数据类型, ...

  10. [jobdu]数组中出现次数超过一半的数字

    找到以后要再扫一遍确认. http://zhedahht.blog.163.com/blog/static/25411174201085114733349/ #include <iostream ...