logo标签列表

在怪异模式下不正常工作的所有内容清单？

cssinternet-explorerdocumentationquirks-mode
3

有人有完整的HTML、JavaScript和CSS在Quirks模式下出现错误的清单吗（特别是IE Quirks模式）？

我查看了quirksmode.org上的列表http://www.quirksmode.org/css/quirksmode.html，但似乎不够全面。例如，我发现一些浏览器在不使用frameset doctype时会出现框架问题。

谢谢， b.a.a.

将IE内存泄漏问题在怪异模式下添加到您的列表中。 - Alex Nolasco
1个回答
5
以下是浏览器特定的怪异模式行为概述：

Some HTML5 features are not supported some versions of IE. E.g., IE 9 does not recognize the canvas element in Quirks Mode.

The box model is incorrect (different from CSS spec­i­fi­ca­tions, though perhaps intuitively more natural). This means that the width and height properties specify the dimen­sions of the entire element box, including padding and border, and not just the element’s content. (There is a demo later in this document.)

Dimensions of non-replaced inline elements (e.g., span elements by default) are affected by width and height properties (while by CSS specifications, they shall be ignored).

Percentage heights for elements (e.g., <table height="100%"> in HTML or table { height: 100% } in CSS) are applied, using the available height as reference, even when the enclosing block has height: auto (the default). In Standards Mode, the height is determined by the require­ments of the content; but percentage heights work when the enclosing block has its height set to a specific value.

The height of the body element is 100%, as opposite to being determined by its content. (If you want 100% height for body in standards mode, set html, body { height: 100% } in CSS.)

Textarea widths are calculated differently. E.g., on IE 9, cols=5 makes the area 5 characters wide in Standards Mode but only 4 characters wide in Quirks Mode.

Overflow is treated by expanding a box. When the content of an element does not fit into the dimensions specified for it (explicitly or implicitly), then overflow: visible (the default) means that the content overflows while the box dimensions are as specified. In Quirks Mode, the dimensions change; this can easily been seen e.g. if the box has a back­ground color or a border.

Alt text is not always shown as a replacement for an image when the image is not shown. When the img element has dimensions smaller than needed for the text, e.g. as in <img src="x.png" alt="Some alt text" width="8" height="9"> when x.png does not exist. Firefox omits the text and shows a generic icon for a broken image only.

The root element is the body element on IE in Quirks Mode. By the specifications, it is the html element. For example, setting a margin or width for body has no effect in Quirks Mode. As another example, IE has a vertical scrollbar by default, though it is inactive (dim) when there is nothing to scroll, and you can remove it (when it is not needed) in Quirks Mode by setting body { overflow: auto; }, but in Standards Mode, you need to add html { overflow: auto; } as well.

A gray 2px page border appears by default on some versions of IE. It can in some cases be changed or removed by setting the border property of the html element (e.g., html { border: 0; }).

The id attribute values are matched case-insensitively, so that e.g. the CSS selector #foo matches an element with id="Foo". By the specifications, the match must be case-sensitive: #foo matches only an element with id="foo".

Padding for an image is ignored when set in CSS for an img element or an input type="image" element. Default horizontal margin for a floated image is three pixels (instead of zero). That is, if the img element has the attribute align="left" or align="right" or if the CSS rule float: left or float: right applies to it, the browser behaves as if the img element had the attribute hspace="3" (or its margin-left and margin-right properties had the value 3px). This applies to IE; on other browsers, Quirks Mode may cause the extra margin on one side of the image only, and its width can be 2 pixels instead of 3.

Vertical alignment of an image is under certain conditions to the bottom of the enclosing box, not to the baseline of text. This happens when the image is the only content within an element, typically a table cell. This means that e.g. an image in a table cell is by default at the bottom of the cell in Quirks Mode (which is often what the author wants), whereas in Standards Mode there is a few pixels spacing below the image (unless one sets e.g. vertical-align: bottom for the img element).

Text rendering on IE 9 does not use several new features in the browser, when in Quirks Mode. This may e.g. make the width needed by some text different in different modes, thereby affecting the division of text into lines. See Microsoft’s About Text Rendering in Windows Internet Explorer 9.

Centering a block in CSS using e.g. margin: 0 auto does not work. Note: On IE up to IE 7, setting align="center" in HTML or text-align: center in CSS for a div incorrectly centers any inner block element as a whole, even in Standards Mode. On IE 8, this happens in Quirks Mode only,

Font properties are not inherited from body or other enclosing elements into tables. This happens especially for font-size but may happen for font face, color, and line height as well. For example, if you set body { font-family: Arial }, it is possible that the font in table cells remains the browser default.

In a font size setting for a table cell, a percentage value is interpreted as relative to the browser’s basic font size, not to the font size that applies to the enclosing element (the table row) by CSS specifications.

Font size keywords are interpreted incorrectly so that medium is larger than the browser’s basic font size and small equals that basic font size. Similarly, the entire scale of keywords, xx-small, x-small, small, large, x-large, xx-large is interpreted systematically wrong: each value is interpreted as one step larger than it should.

Font rendering is different on IE 9. In Standards Mode, it applies more advanced technologies. This causes small difference that may matter, affecting the width of text among other things. See About Text Rendering in Windows Internet Explorer 9.

Border width keywords thin, medium, and thick have different meanings on IE. For example, thin is 1px in Standards Mode, 2px in Quirks Mode.

The bordercolor attribute, which is nonstandard but widely supported, is treated differently in Quirks Mode vs. Standards mode by IE. The colors appear differently, though this seems to be caused by an effect on border style.

Radio buttons and checkboxes have total dimensions 20 by 20 pixels in IE in Quirks Mode, as opposite to 13 by 13 in Standards Mode and in other browsers. The size of the graphic button or box is the same, but the spacing around it is different. It is an integral part of the element rendering, not affected by padding or margin properties, but affected by width and height properties.

Malformed property values are often interpreted on the basis of guesswork, e.g. margin: 10 as margin: 10px and color: ffffff as color: #ffffff. This violates mandatory error processing rules in CSS: a rule using syntactically incorrect value shall be ignored.

Incorrect property values that are not recognized by a browser may cause an earlier setting for the property to be ignored. For example, setting h1 { color: red; color: nonsense; } may cause the entire rule to be ignored; by the specifications, the correct setting color: red shall prevail. Such duplicate settings are often used in an attempt to provide a fallback when using advanced CSS values, and this often fails in Quirks Mode, because the fallback gets ignored. The problem only appears within a CSS rule, so dividing a rule into two parts would help. For example, instead of h1 { color: #ccc; color: rgba(255, 255, 255, 0.7); } you would use h1 { color: #ccc; } h1 { color: rgba(255, 255, 255, 0.7); }

Case of letters is treated as insignificant in class and identifier selectors in CSS. Thus, the selector .foo matches an element with class="Foo" or class="FOO". By CSS specifications, the case is significant in these contexts. Malformed names are accepted in class and identifier selectors. Specifically, names starting with a period or a number sign (e.g. in selectors .123a and #42) are accepted.

The declaration white-space: pre is ignored.

Fixed positioning is not supported: the declaration position: fixed is treated as position: static (on IE 7).

Many standard (CSS 2.1) additions to CSS support (such as the max-width property and attribute selectors) in IE 7 are not in use Quirks Mode. That is, there are many CSS features that were not supported in IE 6 and are supported in IE 7, but only in Standards Mode. See Microsoft’s blog entry Details on our CSS changes for IE7.

Some nonstandard CSS features (features not in CSS 2.1) such as scrollbar properties are recognized by some versions of IE and Opera in Quirks Mode but ignored in Standards Mode. On IE 8 and newer, this also applies to the expression() construct.

Setting rowspan=0 or colspan=0 is ignored in many browsers, even if they support these settings in Standards Mode. (They mean that the cell spans the rest of the row or column. This was implemented in browsers relatively lately.)

Tag soup parsing. For example, if a document contains the markup <p>text<table>...</table> then e.g. Firefox treats, in Quirks Mode, the p element as containing the table element. In Standards Mode, the start tag of table implicitly closes the open p element. The difference can be seen if you e.g. set a border on the p element. Similarly, for example, Firefox accepts a ul element inside a font element. IE always works by wrong rules in such issues, even in Standards Mode, but standards-conforming behavior can be achieved by using valid markup and always using explicit end tags like </p> even when they are formally optional.

Different tag soup processing. An opposite issue, more or less, is that in Quirks Mode, markup like <font color=red><table>...</table></font> does not affect the color of text inside the table. In Standards Mode, it does – even though the markup is nonstandard (invalid according to all HTML specifications)!

White space between elements can be significant. For example, let’s say you have a list of links. Typically you would write the markup with line breaks between the list items, the li elements (that is, between </li> and <li> tags):

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

然而，如果您对链接元素设置display: block和边框，则可能会在框之间出现垂直间隙（空行）。这在Quirks模式下的IE 7上发生，并且始终在早期版本的IE上发生。另一方面，对于上面的标记，如果您为li元素设置display：inline，则在Quirks模式下的IE中没有元素框之间的空格。在标准模式和其他浏览器上，存在与一个空白相对应的空格，这被某些人认为符合标准。
在某些浏览器中，表单具有默认的底部边距约为1em。 （在IE 7上，在两种模式下都有这样的边距。）这显然是为了延续Web浏览器留下如此多的间距在表单下面的传统。如何消除表单后面的空行曾经是一个常见问题。
默认垂直边距在某些情况下被抑制，例如当p元素作为td元素中的第一个元素出现时。这在浏览器中更或多或少是传统行为，并且在IE 7的两种模式（在IE 8中，仅在Quirks模式下）中发生。如果相关元素在CSS中明确设置了垂直边距，则不会出现此问题。
在一些旧式浏览器（包括Quirks模式下的IE 8，但不包括标准模式）中，img元素的工具提示效果基于alt属性。
wbr标记用于换行机会。浏览器广泛支持它，但IE 8在“标准模式”下停止了支持。这是个坏消息，因为标签一直是Web页面上建议无法分割的字符串的唯一有效方法。
Mozilla浏览器（如Firefox和Seamonkey）具有一些额外的功能，在quirk.css文件中有记录。例如，表格边框的默认颜色是灰色（与大多数其他浏览器相同），而不是像标准模式中使用表格的前景色。注意：该文件中的所有设置并不适用于所有版本的Mozilla。
某些DOM功能不可用。例如，在Quirks模式下，IE 9不识别getElementsByClassName方法（其他浏览器都支持并包含在HTML5中）。
所谓的Window对象上的命名访问，例如使用（在JavaScript中）window.foo，window ['foo']或仅foo来引用id =“foo”的元素，在某些版本的Firefox中仅在Quirks模式下才可能。（在版本15中，它恢复了对此遗留特性的支持，同时支持两种模式。）
在Firefox中，仅在Quirks模式下才识别document.all集合（在JavaScript中）。
在Firefox中，即使指定了高度，在Quirks模式下没有行/行组的表格也具有零高度
在Firefox中，在Quirks模式下，在FRAMESET cols / rows规范中，0 *被视为1 *

无“#”符号的十六进制颜色问题

无单位长度的问题

行高计算问题

块元素忽略行高问题

百分比高度计算问题

HTML元素填充视口的问题

body元素填充HTML元素的问题

表格单元格宽度计算问题

表格单元格不换行最小宽度计算问题

合并表格的问题

文本装饰不传递到表格的问题

表格继承颜色从body的问题

表格单元格高度框盒子模型问题

:active和:hover伪类的问题

参考资料

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接