在Chrome，Firefox和Safari中使用DOCTYPE和BackCompat与CSS1Compat模式有什么区别？ [英] What is the difference of having a DOCTYPE -- and BackCompat vs CSS1Compat mode in Chrome, Firefox, and Safari?
问题描述
我倾向于认为，如果没有 DOCTYPE ，则IE会出现问题，因为如果没有 DOCTYPE ，它将导致
I tend to think that without the DOCTYPE, IE will have issues because without the DOCTYPE, it would render items on the page in Quirk mode, using IE's box model.
我知道我们应该始终将 DOCTYPE 放入页面中的项目。 ，但这里的主要问题是，如果由于某种原因，当我们分析第三方的网页时，或者在我们知道存在错误之前，如果该网页没有 DOCTYPE 或它的 DOCTYPE 错误地出现在诸如< html> 之类的标记之后，并使得 DOCTYPE 行不生效，那么这对Chrome，Firefox和Safari有什么影响？
I know we should always put in a DOCTYPE, but the key concern here is, what if for some reason, when we analyze a third party's webpage, or before we knew there is a bug, that if the page doesn't have a DOCTYPE or its DOCTYPE by mistake came after some markup such as <html> and made the DOCTYPE line not take effect, then what is the effect on Chrome, Firefox, and Safari?
我通常无法分辨出任何区别（或存在区别），直到我在下面运行以下代码。使用 DOCTYPE 时，它将报告正确的视口高度（例如 410 ），但不包含 DOCTYPE ，它将打印出类似 3016 之类的内容。因此，这是一个差异，稍后我会找出原因，但除此之外，Chrome，Firefox和Safari的其他差异是什么？一个重要的用途是，当我们知道差异是什么并且当我们在项目中看到一些问题时，我们可以推断出 DOCTYPE 可能是一个问题。 / p>
I can't tell any difference usually (or are there?), until I run the following code below. With the DOCTYPE, then it will report on correct viewport height (such as 410), but without the DOCTYPE, it will print out something like 3016. So this is one difference and I will find out its cause later, but besides this, what are the other differences on Chrome, Firefox, and Safari? One important use is, when we know what the differences are and when we see some issues in our project, we can infer that it possibly can be a problem with the DOCTYPE.
<!DOCTYPE html>
<html>
<head>
<style>
body { height: 3000; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
onload = function() {
console.log("jQuery version", $.fn.jquery);
console.log("document.compatMode is", document.compatMode);
console.log("$(window).height() is", $(window).height());
}
</script>
</head>
<body>
hi
推荐答案
HTML5规范要求解析媒体类型为 text / html ，当存在打开的p元素时遇到的< table> 标记（严格来说，当打开元素的堆栈在按钮作用域中具有ap元素时）不会导致p元素在怪癖模式下被关闭，否则将被关闭。
The HTML5 spec requires that in the parsing of documents with a media type of text/html, a <table> tag encountered when there's a open p element (strictly, when "the stack of open elements has a p element in button scope") will not cause the p element to be closed in quirks mode, but will otherwise.
在<一个href = http://dom.spec.whatwg.org/#concept-getelementsbyclassname rel = nofollow> DOM，getElementByClassName（）函数在古怪模式下不区分大小写地匹配，否则区分大小写。
In the DOM, the getElementByClassName() function matches case-insensitively in quirks mode and case sensitively otherwise.
对于渲染，有很多更改。来自WHATWG的此规范似乎是最权威的： http://quirks.spec.whatwg.org/
For rendering, there's quite a lot of changes. This spec from WHATWG seems the most authoritative: http://quirks.spec.whatwg.org/
例如，您给出的高度怪异由 3.2无单位长度怪异解释
For example, the height quirk you give is explained by "3.2 The unitless length quirk"
href = http://dev.w3.org/csswg/cssom/#fetching-css-style-sheets rel = nofollow> CSS对象模型（CSSOM）规范描述了对以下算法的更改
The CSS Object Model (CSSOM) spec describes a change to the algorithm for the fetching of style sheets.
CSSOM视图模块规范描述了对clientWidth，clientHeight，scrollTop，scrollLeft，scrollWidth和&在获取和设置时，使用scrollHeight。
The CSSOM View Module spec describes changes to the values of clientWidth, clientHeight, scrollTop, scrollLeft, scrollWidth & scrollHeight when getting and setting.
这篇关于在Chrome，Firefox和Safari中使用DOCTYPE和BackCompat与CSS1Compat模式有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
