The following is a reference HTML document that illustrates my issue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Box model test</title>
<style type="text/css">
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; }
</style>
</head>
<body>
<div id="box" class="common"></div>
<table id="tbl" class="common"></table>
</body>
</html>
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 <div> and a <table>. 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:
The <div> (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').
<table>, 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').
My question is, why are there exceptions to the box model (height of an element should not include border, but it clearly does for <table>) ? Is this documented in W3C specification? Can I rely on this behaviour into the future?
PS: 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).