title: What is the difference of having a DOCTYPE -- and BackCompat vs CSS1Compat mode in Chrome, Firefox, and Safari?
body: <p>I tend to think that without the <code>DOCTYPE</code>, IE will have issues because without the <code>DOCTYPE</code>,  it would render items on the page in Quirk mode, using IE's box model.</p>
  
  <p>I know we should always put in a <code>DOCTYPE</code>, 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 <code>DOCTYPE</code> or its <code>DOCTYPE</code> by mistake came after some markup such as <code>&lt;html&gt;</code> and made the <code>DOCTYPE</code> line not take effect, <strong>then what is the effect on Chrome, Firefox, and Safari?</strong></p>
  
  <p>I can't tell any difference usually (or are there?), until I run the following code below.  With the <code>DOCTYPE</code>, then it will report on correct viewport height (such as <code>410</code>), but without the <code>DOCTYPE</code>, it will print out something like <code>3016</code>.  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 <code>DOCTYPE</code>.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;style&gt;
      body { height: 3000; }
  &lt;/style&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
      onload = function() {
          console.log("jQuery version", $.fn.jquery);
          console.log("document.compatMode is", document.compatMode);
          console.log("$(window).height() is", $(window).height());
      }
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      hi
  </code></pre>