Unexpected box model behaviour in all modern browsers for <table>
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="comm开发者_运维百科on"></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:
alt text http://img204.imageshack.us/img204/853/screen1tu.png
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).
I am seeing similar issues when defining the height of a cell, and it certainly appears that table's use the border-box model, rather than content-box. I strongly suspect, but have no evidence to back this up at the moment, that this is to preserve compatibility with table based layout. For example if you were to set width 100% and a border or margin, then you are going to have scrolling issues (assuming your table takes up the whole window).
This is actually the advantage of the border-box model, as it's difficult to achieve 100%-100px with the content-box, but trivial here. Fortunately with CSS3 we can select to use a border-box for block level elements, which it possibly should have been in the first place. I remember once hearing that IE5 had implemented the border-box since that was in the daft specs, which then changed.
A close reading of the CSS specification regarding table layout would probably confirm if this is the case.
The problem I am seeing just now is that if I get a cell a height of 200px, a border of 10px and a padding of 20px, then use getCalculatedStyle(), the browser tells me that he height is 140px! Despite me specifically setting the height to 200px.
Regards, Allan
Very curious. I can get them to behave identically, but only by including a <tr> and <td> in the table and setting them both to border-collapse: collapse and display: table, as you can see here:
http://jsbin.com/ijila
It's not a solution, as such, but it might help throw some light on it.
Add a border-collapse: collapse to the #tbl css. You still have cell padding.
加载中,请稍侯......
精彩评论