在怪异模式下无法正常工作的所有内容的列表？

Question

Closed. This question is seeking recommendations for software libraries, tutorials, tools, books, or other off-site resources. It does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

我们不允许提出寻求软件库、教程、工具、书籍或其他场外资源推荐的问题。您可以编辑问题，以便用事实和引文来回答。

6 年前已关闭。

Answer 1

以下是浏览器特定怪癖模式行为的汇总：

某些 HTML5 功能不受某些版本的 IE 支持。例如，IE 9 无法识别 Quirks 模式下的 canvas 元素。

盒子模型不正确（与 CSS 规范不同，尽管直观上可能更自然）。这意味着 width 和 height 属性指定整个元素框的尺寸，包括填充和边框，而不仅仅是元素的内容。 （本文档后面有一个演示。）

非替换内联元素（例如默认的span元素）的尺寸受宽度和高度属性的影响（而根据CSS规范，它们应被忽略）。

应用元素的百分比高度（例如，HTML 中的

或 CSS 中的 table { height: 100% }） ，使用可用高度作为参考，即使封闭块的高度为：auto（默认值）。标准模式下，高度根据内容要求确定；但当封闭块的高度设置为特定值时，百分比高度起作用。

body 元素的高度为 100%，这与由内容决定的高度相反。 （如果您希望标准模式下的 body 高度为 100%，请在 CSS 中设置 html, body { height: 100% }。）

文本区域宽度的计算方式不同。例如，在 IE 9 上，cols=5 使该区域在标准模式下为 5 个字符宽，但在怪异模式下仅为 4 个字符宽。

通过展开框来处理溢出。当元素的内容不适合为其指定的尺寸（显式或隐式）时，overflow:visible（默认）意味着内容溢出，而框尺寸符合指定。在 Quirks 模式下，尺寸会发生变化；这很容易看出，例如，如果盒子有背景颜色或边框。

当图像未显示时，替代文本并不总是显示为图像的替换。当 img 元素的尺寸小于文本所需的尺寸时，例如 当 x.png 不存在时。 Firefox 会忽略文本并仅针对损坏的图像显示通用图标。

根元素是 Quirks 模式下 IE 上的 body 元素。根据规范，它是 html 元素。例如，设置正文的边距或宽度在 Quirks 模式下不起作用。另一个例子，IE 默认情况下有一个垂直滚动条，尽管当没有任何内容可滚动时它处于非活动状态（暗淡），并且您可以通过设置 body { Overflow: 在 Quirks 模式下将其删除（不需要时）：汽车; }，但在标准模式下，需要添加 html { Overflow: auto; } 也是如此。

某些版本的 IE 上默认显示灰色 2px 页面边框。在某些情况下，可以通过设置 html 元素的 border 属性（例如 html { border: 0; }）来更改或删除它。

id 属性值的匹配不区分大小写，因此 CSS 选择器 #foo 会匹配 id="Foo" 的元素。根据规范，匹配必须区分大小写：#foo 仅匹配 id="foo" 的元素。

在 CSS 中为 img 元素或 input type="image" 元素设置时，图像的填充将被忽略。
浮动图像的默认水平边距是三个像素（而不是零）。也就是说，如果img元素具有属性align =“left”或align =“right”，或者如果CSS规则float：left或float：right适用于它，则浏览器的行为就像img元素具有属性hspace = “3”（或其 margin-left 和 margin-right 属性的值为 3px）。这适用于 IE；在其他浏览器上，Quirks 模式可能只会导致图像一侧出现额外边距，并且其宽度可以是 2 像素而不是 3 像素。

在某些条件下，图像的垂直对齐是与封闭框的底部对齐，而不是与文本的基线对齐。当图像是元素（通常是表格单元格）中的唯一内容时，就会发生这种情况。这意味着，例如，在怪异模式下，表格单元格中的图像默认位于单元格的底部（这通常是作者想要的），而在标准模式下，图像下方有几个像素间距（除非设置例如垂直对齐：img 元素的底部）。

在 Quirks 模式下，IE 9 上的文本渲染不会使用浏览器中的一些新功能。这可能例如使得一些文本所需的宽度在不同模式下不同，从而影响文本到行的划分。请参阅 Microsoft 的关于 Windows Internet Explorer 9 中的文本呈现。

使用例如 margin: 0 auto 将 CSS 中的块居中不起作用。注意：在 IE 至 IE 7 上，在 HTML 中设置align=“center”或在 CSS 中为 div 设置 text-align:center 会错误地将任何内部块元素作为一个整体居中，即使在标准模式下也是如此。在 IE 8 上，这种情况仅发生在 Quirks 模式下，

字体属性不会从正文或其他封闭元素继承到表中。这种情况尤其适用于字体大小，但也可能适用于字体、颜色和行高。例如，如果您设置 body { font-family: Arial }，表格单元格中的字体可能会保留浏览器默认字体。

在表格单元格的字体大小设置中，百分比值被解释为相对于浏览器的基本字体大小，而不是相对于 CSS 规范应用于封闭元素（表格行）的字体大小。

字体大小关键字的解释不正确，因此“中”大于浏览器的基本字体大小，“小”等于该基本字体大小。同样，关键字 xx-small、x-small、small、large、x-large、xx-large 的整个范围被系统性地解释为错误：每个值都被解释为比应有的值大一级。

IE 9上的字体渲染有所不同。在标准模式下，它应用了更先进的技术。这会导致可能很重要的微小差异，影响文本的宽度等。请参阅关于 Windows Internet Explorer 9 中的文本呈现。

边框宽度关键字“thin”、“medium”和“thick”在 IE 上具有不同的含义。例如，thin 在标准模式下为 1px，在 Quirks 模式下为 2px。

bordercolor 属性是非标准但得到广泛支持的属性，IE 在 Quirks 模式与标准模式中的处理方式有所不同。颜色看起来不同，但这似乎是由边框样式的影响引起的。

单选按钮和复选框在 Quirks 模式下的 IE 中的总尺寸为 20 x 20 像素，而标准模式和其他浏览器中的总尺寸为 13 x 13。图形按钮或框的大小相同，但周围的间距不同。它是元素渲染的一个组成部分，不受 padding 或 margin 属性影响，但受 width 和 height 属性影响。

格式错误的属性值通常会根据猜测进行解释，例如，将 margin: 10 解释为 margin: 10px，将 color: ffffff 解释为 color: #ffffff。这违反了 CSS 中的强制错误处理规则：使用语法不正确值的规则将被忽略。

浏览器无法识别的不正确属性值可能会导致该属性的早期设置被忽略。例如，设置 h1 { color: red;颜色：废话； } 可能会导致整个规则被忽略；根据规格，以正确设置颜色：红色为准。此类重复设置通常用于尝试在使用高级 CSS 值时提供后备，而在 Quirks 模式下这通常会失败，因为后备会被忽略。该问题仅出现在 CSS 规则中，因此将规则分为两部分会有所帮助。例如，代替 h1 { color: #ccc;颜色: rgba(255, 255, 255, 0.7); } 你会使用 h1 { color: #ccc; } h1 { 颜色: rgba(255, 255, 255, 0.7); }

CSS 中的类和标识符选择器中字母的大小写被视为无关紧要。因此，选择器 .foo 与 class="Foo" 或 class="FOO" 的元素匹配。根据 CSS 规范，这种情况在这些上下文中具有重要意义。
类和标识符选择器接受格式错误的名称。具体来说，接受以句点或数字符号开头的名称（例如在选择器 .123a 和 #42 中）。

声明空白：pre 被忽略。

不支持固定定位：声明position:fixed被视为position:static（在IE 7上）。

IE 7 中对 CSS 支持的许多标准 (CSS 2.1) 添加（例如 max-width 属性和属性选择器）未使用 Quirks 模式。也就是说，有许多 CSS 功能在 IE 6 中不支持，而在 IE 7 中支持，但仅在标准模式下支持。请参阅 Microsoft 的博客文章有关 IE7 的 CSS 更改的详细信息。

某些非标准 CSS 功能（CSS 2.1 中没有的功能），例如滚动条属性，可以在 Quirks 模式下被某些版本的 IE 和 Opera 识别，但在标准模式下会被忽略。在 IE 8 及更高版本上，这也适用于 expression() 构造。

在许多浏览器中，设置 rowspan=0 或 colspan=0 会被忽略，即使它们在标准模式下支持这些设置。 （它们意味着单元格跨越行或列的其余部分。这是最近在浏览器中实现的。）

标签汤解析。例如，如果文档包含标记


文本<表格>...
那么例如，Firefox 在 Quirks 模式下将 p 元素视为包含 table 元素。在标准模式下，表的开始标记隐式关闭打开的 p 元素。例如，如果您在 p 元素上设置边框，则可以看到差异。同样，例如，Firefox 接受 font 元素内的 ul 元素。在此类问题中，即使在标准模式下，IE 也总是按照错误的规则工作，但是通过使用有效的标记并始终使用显式的结束标记（例如

）可以实现符合标准的行为，即使它们是正式可选。

不同标签的汤处理。或多或少的一个相反的问题是，在 Quirks 模式下，像

...

这样的标记不会影响表格内文本的颜色。在标准模式下，它确实如此 - 即使标记是非标准的（根据所有 HTML 规范无效）！

元素之间的空白可能很重要。例如，假设您有一个链接列表。通常，您可以在列表项、li 元素之间（即 和

标记之间）编写带有换行符的标记：< /p>

    <ul>
    <li><a ...>...</a></li>
    <li><a ...>...</a></li>
    ...
    </ul>

但是，如果您设置 display: block 和链接元素的边框，则可能会在框之间出现垂直间隙（空行）。这种情况发生在怪异模式下的 IE 7 上，并且总是发生在早期版本的 IE 上。另一方面，对于上面的标记，如果为 li 元素设置 display: inline ，则 Quirks 模式下 IE 上的元素框之间没有空格。在标准模式和其他浏览器中，空白对应于一个空白，这被某些人视为符合标准。

在某些浏览器中，表单的默认下边距为 1em 左右。 （在 IE 7 上，两种模式都有这样的边距。）这显然是为了延续 Web 浏览器在表单下方留出这么大间距的传统。如何去掉表单后的空行曾经是一个常见问题。

默认垂直边距在某些情况下会被抑制，例如当 ap 元素作为 td 元素中的第一个元素出现时。这或多或少是浏览器中的传统行为，并且在 IE 7 的两种模式下都会发生（在 IE 8 上，仅在 Quirks 模式下）。如果相关元素在 CSS 中明确设置了垂直边距，则不会出现此问题。

img 元素的工具提示效果基于某些旧式浏览器上的 alt 属性，包括怪异模式下的 IE 8，但标准模式下则不然。

尊重换行机会的 wbr 标记。浏览器已广泛支持它，但 IE 8 已停止在“标准模式”下这样做。这是个坏消息，因为 标签是为网页上其他不可破坏的字符串建议换行机会的唯一有效方法。

Mozilla 浏览器（如 Firefox 和 Seamonkey）有一些附加功能，记录在 quirk.css 文件中。例如，表格边框的默认颜色是灰色（与大多数其他浏览器一样），这与标准模式中使用表格的前景色相反。注意：并非该文件中的所有设置都适用于 Mozilla 的所有版本。

某些 DOM 功能不可用。例如，在 Quirks 模式下，IE 9 无法识别 getElementsByClassName 方法（其他浏览器很好地支持该方法并包含在 HTML5 中）。

所谓的 Window 对象命名访问，例如使用（在 JavaScript 中）window.foo、window['foo'] 或仅 foo 来引用 id="foo" 的元素，仅在 Quirks 模式下可行在某些版本的 Firefox 中。 （然而，在版本 15 中，它在两种模式下恢复了对这一旧功能的支持。）

在 Firefox 中，document.all 集合（JavaScript 中）仅在 Quirks 模式下被识别。

在 Firefox 中，在怪异模式下，即使指定了高度，没有行/行组的表的高度也为零

在 Firefox 中，在 FRAMESET 列/行规范的怪异模式下，0* 被视为 1*

以及一些 CSS 怪异：

无哈希十六进制颜色怪癖

无单位长度怪癖

行高计算怪癖

这些块忽略行高怪异

百分比高度计算怪癖

html 元素填充了视口的怪癖

body元素填补了html元素的怪癖

表格单元格宽度计算怪癖

表格单元格现在包裹最小宽度计算怪癖

折叠表的怪癖

文本装饰不会传播到表格怪癖中

表格继承了身体怪癖的颜色

表格单元格高度框大小调整怪癖

:active 和 :hover 怪癖

参考

• 网络浏览器中的 Quirks 模式会发生什么？

• Quirks 模式标准

• Mozilla Quirks 模式行为 - Mozilla | rel="noreferrer">Mozilla Quirks 模式行为MDN

• IE10 中的可互操作 HTML5 Quirks 模式 - IEBlog

• HTML 5.2：第 10 节：渲染