zoukankan      html  css  js  c++  java
  • 坑爹的IE quirk模式

    调试一个页面,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,其他浏览器未知。
  • 相关阅读:
    linux 命令——19 find (转)
    linux 命令——18 locate (转)
    linux 命令——17 whereis(转)
    linux 命令——16 which(转)
    linux 命令——15 tail (转)
    linux 命令——14 head (转)
    Java for LeetCode 038 Count and Say
    Java for LeetCode 037 Sudoku Solver
    Java for LeetCode 036 Valid Sudoku
    Java for LeetCode 035 Search Insert Position
  • 原文地址:https://www.cnblogs.com/zaric/p/2263139.html
Copyright © 2011-2022 走看看