问题
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.
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?
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
回答1:
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.
In the DOM, the getElementByClassName() function matches case-insensitively in quirks mode and case sensitively otherwise.
For rendering, there's quite a lot of changes. This spec from WHATWG seems the most authoritative: http://quirks.spec.whatwg.org/
For example, the height quirk you give is explained by "3.2 The unitless length quirk"
The CSS Object Model (CSSOM) spec describes a change to the algorithm for the fetching of style sheets.
The CSSOM View Module spec describes changes to the values of clientWidth, clientHeight, scrollTop, scrollLeft, scrollWidth & scrollHeight when getting and setting.
来源：https://stackoverflow.com/questions/18283890/what-is-the-difference-of-having-a-doctype-and-backcompat-vs-css1compat-mode