title: Doctype line height issue
body: <p>I've got two HTML pages 
  EDIT: <a href="http://jsfiddle.net/ywu5107e/" rel="nofollow">fiddle</a> if you click on fiddle options and switch between the doc types you can see the difference in how they're rendered.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="Styles.css" title="Styles" /&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="page1" &gt;
  
  &lt;div class="classTextbox1"&gt;
      &lt;p&gt;
          &lt;span class="text165"&gt;
              this is a big string this is a big string this is a big string this is a big string this is a big string this is a big string 
          &lt;/span&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="Styles.css" title="Styles" /&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="page1" &gt;
  
  &lt;div class="classTextbox1"&gt;
      &lt;p&gt;
          &lt;span class="text165"&gt;
              this is a big string this is a big string this is a big string this is a big string this is a big string this is a big string 
          &lt;/span&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The stylesheet for both of them is </p>
  
  <pre><code>p { margin-top: 0; margin-bottom: 0 }
  table { border-collapse: collapse; border-spacing: 0 }
  tr { vertical-align : top }
  
  body { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; word-wrap: break-word }
  
  .text127 {font: 13px "Times New Roman", "Times New Roman", serif; line-height: 15px }
  .text165 {font: 11px "Helvetica", "Helvetica", sans-serif; }
  .classTextbox1 { position: absolute; left: 24px; top: 60px; width: 73px; height: 12px; overflow: hidden }
  .page1{ position: absolute; top: 0px; width:816px; height:1008px }
  </code></pre>
  
  <p>Besides the doc type the HTML pages are identical and the style sheets are identical.  However, when the HTML5 doc type is viewed in Chrome (latest) and Firefox (32) the text appears several pixels lower than it does in HTML4.  I'm not sure if <code>line-height</code> is the culprit, but I'm lost for what the problem is.  Any ideas?  TIA.</p>