有没有人有在 Quirks 模式（特别是 IE Quirks 模式）中有缺陷的 HTML、JavaScript 和 CSS 的完整列表？
我在http://www.quirksmode.org/css/quirksmode.html查看了 quirksmode.org 列表，但它似乎并不全面。例如，我看到一些浏览器在框架方面存在问题，除非您使用框架集文档类型。
谢谢，咩
问问题
2062 次
1 回答
2
以下是浏览器特定的怪癖模式行为的集合：
某些版本的 IE 不支持某些 HTML5 功能。例如，IE 9 无法识别 Quirks 模式下的 canvas 元素。
盒子模型是不正确的（不同于 CSS 规范，虽然可能直观上更自然）。这意味着 width 和 height 属性指定了整个元素框的尺寸，包括填充和边框，而不仅仅是元素的内容。（本文档后面有一个演示。）
未替换的内联元素（例如，默认的 span 元素）的尺寸受宽度和高度属性的影响（而根据 CSS 规范，它们应被忽略）。
应用元素的百分比高度（例如，
<table height="100%">在 HTML 或table { height: 100% }CSS 中），使用可用高度作为参考，即使封闭块具有高度：auto（默认值）。在标准模式下，高度由内容的要求决定；但是当封闭块的高度设置为特定值时，百分比高度起作用。body 元素的高度是 100%，这与由其内容决定的相反。（如果你想在标准模式下为 body 设置 100% 的高度，请
html, body { height: 100% }在 CSS 中设置。）文本区域宽度的计算方式不同。例如，在 IE 9 上，cols=5 在标准模式下使区域宽 5 个字符，但在 Quirks 模式下只有 4 个字符宽。
通过扩展一个框来处理溢出。当元素的内容不适合为其指定的尺寸（显式或隐式）时，溢出：可见（默认）意味着内容溢出，而盒子尺寸符合指定。在 Quirks Mode 中，尺寸会发生变化；这可以很容易地看到，例如，如果盒子有背景颜色或边框。
当图像未显示时，替代文本并不总是显示为图像的替代品。当 img 元素的尺寸小于文本所需的尺寸时，例如
<img src="x.png" alt="Some alt text" width="8" height="9">当 x.png 不存在时。Firefox 会省略文本并仅显示损坏图像的通用图标。根元素是 IE 上 Quirks 模式下的 body 元素。按照规范，它是 html 元素。例如，设置 body 的边距或宽度在 Quirks 模式中无效。再举一个例子，IE 默认有一个垂直滚动条，虽然它在没有可滚动的内容时处于非活动状态（暗淡），您可以在 Quirks 模式下通过设置将其移除（当不需要时）
body { overflow: auto; }，但在标准模式下，您也需要添加html { overflow: auto; }。在某些版本的 IE 上默认显示灰色 2px 页面边框。在某些情况下，可以通过设置 html 元素的边框属性（例如，
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 Mode 可能只在图像的一侧产生额外的边距，其宽度可以是 2 像素而不是 3 像素。
图像的垂直对齐在某些条件下与封闭框的底部对齐，而不是与文本的基线对齐。当图像是元素（通常是表格单元格）中的唯一内容时，就会发生这种情况。这意味着例如表格单元格中的图像在 Quirks 模式下默认位于单元格的底部（这通常是作者想要的），而在标准模式下，图像下方有几个像素间距（除非设置例如垂直对齐：img 元素的底部）。
IE 9 上的文本呈现在 Quirks 模式下不使用浏览器中的几个新功能。这可能例如使某些文本在不同模式下所需的宽度不同，从而影响将文本划分为行。请参阅 Microsoft 关于 Windows Internet Explorer 9 中的文本呈现。
使用例如 margin: 0 auto 在 CSS 中居中一个块不起作用。注意：在 IE 7 之前，在 HTML 中设置 align="center" 或在 CSS 中为 div 设置 text-align: center 会错误地将任何内部块元素作为一个整体居中，即使在标准模式下也是如此。在 IE 8 上，这仅在 Quirks 模式下发生，
字体属性不会从正文或其他封闭元素继承到表格中。这尤其发生在字体大小上，但也可能发生在字体、颜色和行高上。例如，如果您设置
body { font-family: Arial }，则表格单元格中的字体可能会保持浏览器默认值。在表格单元格的字体大小设置中，百分比值被解释为相对于浏览器的基本字体大小，而不是 CSS 规范应用于封闭元素（表格行）的字体大小。
字体大小关键字被错误解释，因此 medium 大于浏览器的基本字体大小，而 small 等于基本字体大小。同样，关键字 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 Mode 与Standards 模式中的处理方式不同。颜色看起来不同，但这似乎是由对边框样式的影响引起的。
在 Quirks 模式下，单选按钮和复选框在 IE 中的总尺寸为 20 x 20 像素，而在标准模式和其他浏览器中则为 13 x 13 像素。图形按钮或框的大小相同，但其周围的间距不同。它是元素渲染的一个组成部分，不受填充或边距属性的影响，但受宽度和高度属性的影响。
格式错误的属性值通常根据猜测进行解释，例如，margin: 10 为 margin: 10px 和 color: ffffff 为 color: #ffffff。这违反了 CSS 中的强制性错误处理规则：应忽略使用语法错误值的规则。
浏览器无法识别的不正确属性值可能会导致属性的早期设置被忽略。例如，设置
h1 { color: red; color: nonsense; }可能会导致整个规则被忽略；以正确设置color: red为准。在使用高级 CSS 值时，经常使用此类重复设置来提供回退，这在 Quirks 模式下通常会失败，因为回退被忽略。该问题仅出现在 CSS 规则中，因此将规则分为两部分会有所帮助。例如，而不是h1 { color: #ccc; color: rgba(255, 255, 255, 0.7); }你会使用h1 { color: #ccc; } h1 { color: rgba(255, 255, 255, 0.7); }在 CSS 中的类和标识符选择器中，字母的大小写被视为无关紧要。因此，选择器 .foo 匹配带有 class="Foo" 或 class="FOO" 的元素。根据 CSS 规范，这种情况在这些情况下很重要。在类和标识符选择器中接受格式错误的名称。具体来说，接受以句点或数字符号开头的名称（例如，在选择器 .123a 和 #42 中）。
声明 white-space: pre 被忽略。
不支持固定定位：声明位置：固定被视为位置：静态（在 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 会被忽略，即使它们在标准模式下支持这些设置。（它们意味着单元格跨越行或列的其余部分。这是最近在浏览器中实现的。）
标签汤解析。例如，如果一个文档包含标记
<p>text<table>...</table>，那么例如 Firefox 在 Quirks 模式下将 p 元素视为包含 table 元素。在标准模式下，table 的开始标签会隐式关闭打开的 p 元素。如果您例如在 p 元素上设置边框，则可以看到差异。类似地，例如，Firefox 接受字体元素中的 ul 元素。IE 在此类问题中总是按照错误的规则工作，即使在标准模式下也是如此，但可以通过使用有效标记并始终使用显式结束标记来实现符合标准的行为，</p>即使它们在形式上是可选的。不同的标签汤处理。或多或少的一个相反问题是，在 Quirks 模式下，类似标记
<font color=red><table>...</table></font>不会影响表格内文本的颜色。在标准模式下，它确实如此——即使标记是非标准的（根据所有 HTML 规范无效）！元素之间的空白可能很重要。例如，假设您有一个链接列表。通常，您会在列表项之间使用换行符编写标记，li 元素（即，
</li>和<li>标签之间）：
<ul>
<li><a ...>...</a></li>
<li><a ...>...</a></li>
...
</ul>
但是，如果为链接元素设置 display: block 和边框，则框之间可能会出现垂直间隙（空线）。这种情况发生在 IE 7 的 Quirks 模式下，并且总是出现在 IE 的早期版本上。另一方面，对于上面的标记，如果为 li 元素设置 display: inline ，那么在 Quirks 模式下 IE 上的元素框之间没有空格。在标准模式下，以及在其他浏览器上，一个空格对应一个空格，这被一些人认为是符合标准的。
在某些浏览器中，表单的默认下边距为 1em 左右。（在 IE 7 上，两种模式都有这样的余量。）这显然是为了延续 Web 浏览器的传统，在表单下方留下这么多的间距。如何去除表格后的空行曾经是一个常见问题。
在某些情况下会抑制默认垂直边距，例如当 ap 元素作为 td 元素中的第一个元素出现时。这或多或少是浏览器中的传统行为，并且在两种模式下都发生在 IE 7 上（在 IE 8 上，仅在 Quirks 模式下）。如果相关元素的垂直边距在 CSS 中明确设置，则不会出现此问题。
img 元素的工具提示效果基于某些旧式浏览器上的 alt 属性，包括 IE 8 在 Quirks 模式下但不在标准模式下。
换行机会的 wbr 标记很荣幸。浏览器已广泛支持它，但 IE 8 在“标准模式”下已停止这样做。这是个坏消息，因为
<wbr>标签是唯一有效的方法来建议网页上其他不可破坏的字符串的换行机会。Mozilla 浏览器（如 Firefox 和 Seamonkey）有一些附加功能，记录在 quirk.css 文件中。例如，表格边框的默认颜色是灰色（在大多数其他浏览器中），这与在标准模式中使用表格的前景色相反。注意：并非该文件中的所有设置都适用于所有版本的 Mozilla。
某些 DOM 功能不可用。例如，在 Quirks 模式下，IE 9 无法识别方法 getElementsByClassName（其他浏览器很好地支持并包含在 HTML5 中）。
对 Window 对象的所谓命名访问，例如使用（在 JavaScript 中）window.foo、window['foo'] 或仅 foo 来引用 id="foo" 的元素，仅在某些版本中才可能在 Quirks 模式下使用火狐。（但在版本 15 中，它在两种模式下都恢复了对这一遗留功能的支持。）
在 Firefox 中，document.all 集合（在 JavaScript 中）仅在 Quirks 模式下被识别。
在 Firefox 中，即使指定了高度，在 quirks 模式下，没有行/行组的表的高度也为零
在 Firefox 中，在 FRAMESET cols/rows 规范中的 quirks 模式下，0* 被视为 1*
还有一些 CSS 怪癖：
无哈希的十六进制颜色怪癖
无单位长度怪癖
行高计算怪癖
块忽略行高怪癖
百分比高度计算怪癖
html 元素填充视口怪癖
body 元素填充 html 元素怪癖
表格单元格宽度计算怪癖
表格单元格 nowrap 最小宽度计算怪癖
折叠桌怪癖
文本装饰不会传播到表格怪癖中
表格从身体怪癖中继承颜色
表格单元格高度框大小调整怪癖
:active 和 :hover 怪癖
参考
于 2016-10-20T07:32:23.167 回答