Quirks方式与Standards模式

Quirks模式与Standards模式

如何进入Standards模式?

一般来讲浏览器是通过DTD来判断模式的；浏览器进入Standards模式的DTD有：HTML的strict.dtd和loose.dtd这两个DTD的简单区别是

• strict去掉了许多表现的标签，有利于结构和表现的分离
• loose会导致Firefox进入Almost Standards模式，在图片的处理上会有微小的差别

  在IE6下，如果在DTD之前有任何字符都将导致其进入quirks模式
  

  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模式下，则会生效

  JavaScript中的区别

  Quirks mode的Table of measurements

  参考

  • Table of measurements
  • MSDN

    dom中的document有一个属性叫compatMode,其返回值是BackCompat和CSS1Compat，分别对应quirks mode和strict mode

    void function(){var mode=document.compatif (mode="BackCompat")alert("当前以quirks mode的方式渲染页面");else if(mode="CSS1Compat")alert("当前已strict mode的方式渲染页面");else alert("浏览器版本不支持compatMode");}()