Baa*_*Baa 3 css documentation internet-explorer quirks-mode
有人有 Quirks 模式(特别是 IE Quirks 模式)中存在 bug 的 HTML、JavaScript 和 CSS 的完整列表吗?
我已经在http://www.quirksmode.org/css/quirksmode.html查看了 quirksmode.org 列表,但它似乎并不全面。例如,我发现某些浏览器存在框架问题,除非您使用框架集文档类型。
谢谢,咩
以下是浏览器特定怪癖模式行为的汇总:
\n\n\n\n\n某些版本的 IE 不支持某些 HTML5 功能。例如,IE 9 无法识别 Quirks 模式下的 canvas 元素。
\n\n盒子模型不正确(与 CSS spec\xc2\xadi\xc2\xadfi\xc2\xadca\xc2\xadtions 不同,尽管直观上可能更自然)。这意味着 width 和 height 属性指定整个元素框的尺寸\xc2\xadsions,包括填充和边框,而不仅仅是 element\xe2\x80\x99s 内容。(本文档后面有一个演示。)
\n\n非替换内联元素(例如默认的span元素)的尺寸受宽度和高度属性的影响(而根据CSS规范,它们应被忽略)。
\n\n元素的百分比高度(例如,
\n\n<table height="100%">在 HTML 或table { height: 100% }即使封闭块具有 height: auto (默认值),也会使用可用高度作为参考来应用元素的标准模式下,高度由内容的require\xc2\xadments决定;但当封闭块的高度设置为特定值时,百分比高度起作用。body 元素的高度为 100%,这与由其内容决定的高度相反。(如果您希望标准模式下身体高度为 100%,请设置
\n\nhtml, body { height: 100% }在 CSS 中设置。)文本区域宽度的计算方式不同。例如,在 IE 9 上,cols=5 使该区域在标准模式下为 5 个字符宽,但在 Quirks 模式下仅为 4 个字符宽。
\n\n通过扩展盒子来处理溢出。当元素的内容不适合为其指定的尺寸(显式或隐式)时,overflow:visible(默认)意味着内容溢出,而框尺寸符合指定。在 Quirks 模式下,尺寸会发生变化;这很容易看出,例如,如果盒子有 back\xc2\xadground 颜色或边框。
\n\n当图像未显示时,替代文本并不总是显示为图像的替换。当 img 元素的尺寸小于文本所需的尺寸时,例如
\n\n<img src="x.png" alt="Some alt text" width="8" height="9">当 x.png 不存在时。Firefox 会忽略文本并仅显示损坏图像的通用图标。根元素是 Quirks 模式下 IE 上的 body 元素。根据规范,它是 html 元素。例如,设置正文的边距或宽度在 Quirks 模式下不起作用。另一个例子,IE 默认有一个垂直滚动条,尽管当没有什么可滚动时它是不活动的(暗淡的),你可以在 Quirks 模式下通过设置删除它(当不需要时)
\n\nbody { overflow: auto; },但在标准模式下,你需要添加html { overflow: auto; }也默认情况下,某些版本的 IE 上会显示灰色的 2px 页面边框。在某些情况下,可以通过设置 html 元素的 border 属性(例如
\n\nhtml { border: 0; })来更改或删除它。id 属性值的匹配不区分大小写,因此 CSS 选择器 #foo 会匹配 id="Foo" 的元素。根据规范,匹配必须区分大小写:#foo 仅匹配 id="foo" 的元素。
\n\n在 CSS 中为 img 元素或 input type="image" 元素设置时,将忽略图像的填充。\n 浮动图像的默认水平边距为三个像素(而不是零)。也就是说,如果img元素具有属性align =“left”或align =“right”,或者如果CSS规则float:left或float:right适用于它,则浏览器的行为就像img元素具有属性hspace = “3”(或其 margin-left 和 margin-right 属性的值为 3px)。这适用于 IE;在其他浏览器上,Quirks 模式可能只会导致图像一侧出现额外边距,并且其宽度可以是 2 像素而不是 3 像素。
\n\n在某些条件下,图像的垂直对齐是到封闭框的底部,而不是到文本的基线。当图像是元素(通常是表格单元格)中的唯一内容时,就会发生这种情况。这意味着,例如,在怪异模式下,表格单元格中的图像默认位于单元格的底部(这通常是作者想要的),而在标准模式下,图像下方有几个像素间距(除非设置例如垂直对齐:img 元素的底部)。
\n\n在 Quirks 模式下,IE 9 上的文本呈现不会使用浏览器中的一些新功能。例如,这可能使得某些文本所需的宽度在不同模式下不同,从而影响文本对行的划分。请参阅 Microsoft\xe2\x80\x99s 关于 Windows Internet Explorer 9 中的文本呈现。
\n\n使用例如 margin: 0 auto 将 CSS 中的块居中不起作用。注意:在 IE 至 IE 7 上,在 HTML 中设置align=“center”或在 CSS 中为 div 设置 text-align:center 会错误地将任何内部块元素作为一个整体居中,即使在标准模式下也是如此。在 IE 8 上,这种情况仅发生在 Quirks 模式下,
\n\n字体属性不会从正文或其他封闭元素继承到表中。这种情况尤其适用于字体大小,但也可能适用于字体、颜色和行高。例如,如果您设置
\n\nbody { font-family: Arial },则表格单元格中的字体可能仍为浏览器默认字体。在表格单元格的字体大小设置中,百分比值被解释为相对于浏览器\xe2\x80\x99s 的基本字体大小,而不是相对于 CSS 规范应用于封闭元素(表格行)的字体大小。
\n\n字体大小关键字被错误地解释,因此中号大于浏览器\xe2\x80\x99s 的基本字体大小,而小号等于该基本字体大小。同样,关键字 xx-small、x-small、small、large、x-large、xx-large 的整个范围在系统上被解释为错误的:每个值都被解释为比应有的值大一级。
\n\nIE 9上的字体渲染有所不同。在标准模式下,它应用了更先进的技术。这会导致可能很重要的微小差异,影响文本的宽度等。请参阅关于 Windows Internet Explorer 9 中的文本呈现。
\n\n边框宽度关键字“thin”、“medium”和“thick”在 IE 上具有不同的含义。例如,标准模式下的细度为 1 像素,怪异模式下的细度为 2 像素。
\n\nbordercolor 属性是非标准但广泛支持的属性,IE 在 Quirks 模式与标准模式中的处理方式有所不同。颜色看起来不同,但这似乎是由边框样式的影响引起的。
\n\n在 Quirks 模式下的 IE 中,单选按钮和复选框的总尺寸为 20 x 20 像素,而标准模式和其他浏览器中的总尺寸为 13 x 13。图形按钮或框的大小相同,但周围的间距不同。它是元素渲染的一个组成部分,不受 padding 或 margin 属性影响,但受 width 和 height 属性影响。
\n\n格式错误的属性值通常会根据猜测进行解释,例如,将 margin: 10 解释为 margin: 10px,将 color: ffffff 解释为 color: #ffffff。这违反了 CSS 中的强制错误处理规则:使用语法不正确值的规则将被忽略。
\n\n浏览器无法识别的错误属性值可能会导致该属性的早期设置被忽略。例如,设置
\n\nh1 { 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 规范,这种情况在这些上下文中很重要。\n 类和标识符选择器接受格式错误的名称。具体来说,接受以句点或数字符号开头的名称(例如,在选择器 0.123a 和 #42 中)。
\n\n声明white-space: pre 被忽略。
\n\n不支持固定定位:声明position:fixed被视为position:static(在IE 7上)。
\n\nIE 7 中对 CSS 支持的许多标准 (CSS 2.1) 添加(例如 max-width 属性和属性选择器)未使用 Quirks 模式。也就是说,有许多 CSS 功能在 IE 6 中不支持,而在 IE 7 中支持,但仅在标准模式下支持。请参阅 Microsoft\xe2\x80\x99s 博客文章 有关 IE7 的 CSS 更改的详细信息。
\n\n某些非标准 CSS 功能(CSS 2.1 中不存在的功能)(例如滚动条属性)在 Quirks 模式下可以被某些版本的 IE 和 Opera 识别,但在标准模式下会被忽略。在 IE 8 及更高版本上,这也适用于 expression() 构造。
\n\n在许多浏览器中,设置 rowspan=0 或 colspan=0 会被忽略,即使它们在标准模式下支持这些设置。(它们意味着单元格跨越行或列的其余部分。这是最近在浏览器中实现的。)
\n\n标签汤解析。例如,如果文档包含标记\n
\n\n<p>text<table>...</table>\n,则 Firefox 在 Quirks 模式下将 p 元素视为包含 table 元素。在标准模式下,表的开始标记隐式关闭打开的 p 元素。例如,如果您在 p 元素上设置边框,则可以看到差异。同样,例如,Firefox 接受 font 元素内的 ul 元素。在此类问题中,即使在标准模式下,IE 也总是按照错误的规则工作,但是可以通过使用有效标记并始终使用显式结束标记(即使</p>它们在形式上是可选的)来实现符合标准的行为。不同标签的汤处理。一个相反的问题或多或少是在 Quirks 模式下,类似标记
\n\n<font color=red><table>...</table></font>不会影响表格内文本的颜色。在标准模式下,即使标记是非标准的(根据所有 HTML 规范无效),它也会执行 \xe2\x80\x93!元素之间的空白可能很重要。例如,令\xe2\x80\x99s 表示您有一个链接列表。
\n</li>通常,您会在列表项、li 元素(即和<li>标签之间)之间编写带有换行符的标记:
<ul>\n <li><a ...>...</a></li>\n <li><a ...>...</a></li>\n ...\n </ul>\nRun Code Online (Sandbox Code Playgroud)\n\n\n\n\n但是,如果您设置 display: block 和链接元素的边框,则可能会在框之间出现垂直间隙(空行)。这种情况发生在怪异模式下的 IE 7 上,并且总是发生在早期版本的 IE 上。另一方面,对于上面的标记,如果为 li 元素设置 display: inline ,则 Quirks 模式下 IE 上的元素框之间没有空格。在标准模式和其他浏览器中,空白对应于一个空白,这被某些人视为符合标准。
\n\n在某些浏览器中,表单的默认下边距为 1em 左右。(在 IE 7 上,两种模式都有这样的边距。)这显然是为了延续 Web 浏览器在表单下方留出这么大间距的传统。如何去掉表单后的空行曾经是一个常见问题。
\n\n在某些情况下,默认垂直边距会被抑制,例如,当 ap 元素作为 td 元素中的第一个元素出现时。这或多或少是浏览器中的传统行为,并且在 IE 7 的两种模式下都会发生(在 IE 8 上,仅在 Quirks 模式下)。如果相关元素在 CSS 中明确设置了垂直边距,则不会出现此问题。
\n\nimg 元素的工具提示效果基于某些旧式浏览器上的 alt 属性,包括怪异模式下的 IE 8,但标准模式下则不然。
\n\n断行机会的 wbr 标记受到尊重。浏览器已广泛支持它,但 IE 8 已停止在 \xe2\x80\x9cstandards 模式下这样做。\xe2\x80\x9d 这是个坏消息,因为
\n\n<wbr>标签是为其他不可破坏的字符串建议换行机会的唯一有效方法在网页上。Mozilla 浏览器(如 Firefox 和 Seamonkey)有一些附加功能,记录在 quirk.css 文件中。例如,表格边框的默认颜色是灰色(与大多数其他浏览器一样),这与标准模式中使用表格的前景色相反。注意:并非该文件中的所有设置都适用于 Mozilla 的所有版本。
\n\n某些 DOM 功能不可用。例如,在 Quirks 模式下,IE 9 无法识别 getElementsByClassName 方法(其他浏览器很好地支持该方法并包含在 HTML5 中)。
\n\n对 Window 对象进行所谓的命名访问,例如使用(在 JavaScript 中)window.foo、window[\'foo\'] 或仅 foo 来引用 id="foo" 的元素,仅在 Quirks 模式下才可能实现某些版本的 Firefox。(然而,在版本 15 中,它在两种模式下恢复了对这一旧功能的支持。)
\n\n在 Firefox 中,document.all 集合(在 JavaScript 中)仅在 Quirks 模式下被识别。
\n\n在 Firefox 中,在怪异模式下,即使指定了高度,没有行/行组的表的高度也为零
\n\n在 Firefox 中,在 FRAMESET 列/行规范的怪异模式下,0* 被视为 1*
\n
还有一些 CSS 怪癖:
\n\n\n\n\n无哈希的十六进制颜色怪癖
\n\n无单位长度怪癖
\n\n线高计算怪癖
\n\n这些块忽略行高怪异
\n\n百分比高度计算怪癖
\n\nhtml 元素填补了视口的怪癖
\n\nbody元素填补了html元素的怪癖
\n\n表格单元格宽度计算怪癖
\n\n表格单元格 nowrap 最小宽度计算怪癖
\n\n折叠桌子的怪癖
\n\n文本装饰不会\xe2\x80\x99t传播到表怪癖中
\n\n桌子继承了身体怪癖的颜色
\n\n表格单元格高度框大小调整怪癖
\n\n:active 和 :hover 怪癖
\n
参考
\n\n| 归档时间: |
|
| 查看次数: |
2533 次 |
| 最近记录: |