Here is a sample HTML document that demonstrates the 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>
When using a combination of HTML5 doctype and X-UA-Compatible meta tag, most modern browsers should switch to their most standards-compliant mode. In this document, there are two absolutely-positioned elements - a <div> and a <table>. These elements have identical width, height, and border properties in CSS. However, when rendered in various browsers, they show unexpected differences as seen here:
Screenshot Link
The <div> (green) follows the box model rules where the content area includes the border height. On the other hand, the <table> (red) has its content area not including the border height. This inconsistency raises questions about the interpretation of element height in relation to borders. Is this behavior documented in W3C specifications? Can it be relied upon in future implementations?
Note: Testing was done on IE 7, IE 8, Opera 10.10, Safari 4.0.4, Chrome 3.0, Firefox 3.5, all showing the same rendering on Windows 7 x64.