title: Unexpected box model behaviour in all modern browsers for <table>
body: <p>The following is a reference HTML document that illustrates my issue:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
          &lt;title&gt;Box model test&lt;/title&gt;
          &lt;style type="text/css"&gt;
              html,body { margin:0; padding:0; background-color:#808080;}
              #box { position:absolute; top:20px; left:20px; background-color:Green; }
              #tbl { position:absolute; top:20px; left:40px; background-color:Red; }
              .common { width:20px; height:30px; border-bottom:solid 1px black; }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="box" class="common"&gt;&lt;/div&gt;
          &lt;table id="tbl" class="common"&gt;&lt;/table&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Combination of HTML5 doctype and X-UA-Compatible meta tag should switch any modern browser to the most standards-compliant mode it supports. The document contains two absolutely-positioned elements, a <code>&lt;div&gt;</code>  and a <code>&lt;table&gt;</code>. They are arranged side-by-side, with exactly the same width, height and border CSS. Unexpectedly, all browsers I tested with render the document like this:</p>
  
  <p><a href="http://img204.imageshack.us/img204/853/screen1tu.png">alt text http://img204.imageshack.us/img204/853/screen1tu.png</a></p>
  
  <p>The <code>&lt;div&gt;</code> (green) follows the box model. The content area is 30 pixels high (green pixels) with 1 pixel of a border underneath (overall height is 31 pixels, CSS height instruction was interpreted as 'not including border').</p>
  
  <p><code>&lt;table&gt;</code>, however, is rendered with content area 29 pixels high (red pixels) with 1 pixel of a border underneath (overall height is 30 pixels, so in this case the CSS height was interpreted as 'including border').</p>
  
  <p>My question is, why are there exceptions to the box model (height of an element should not include border, but it clearly does for <code>&lt;table&gt;</code>) ? Is this documented in W3C specification? Can I rely on this behaviour into the future?</p>
  
  <p><em>PS</em>: I tested this page with IE 7, IE 8, Opera 10.10, Safari 4.0.4, Chrome 3.0, Firefox 3.5, all rendering the document exactly the same (on Win7 x64).</p>