<!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>
HTML5 doctype和X-UA-Compatible元标记的组合应该将任何现代浏览器切换到它支持的最符合标准的模式.该文档包含两个绝对定位的元素,< div>和< table>.它们并排排列,具有完全相同的宽度,高度和边框CSS.出乎意料的是,我测试的所有浏览器都渲染了这样的文档：
alt text http://img204.imageshack.us/img204/853/screen1tu.png
< div> (绿色)遵循盒子模型.内容区域高30像素(绿色像素),下方有1个像素的边框(总高度为31像素,CSS高度指令被解释为’不包括边框’).
然而,< table>呈现的内容区域高29像素(红色像素),下面有1个像素的边框(总高度为30像素,所以在这种情况下CSS高度被解释为’包括边框’).
我的问题是,为什么盒子模型有例外(元素的高度不应该包括边框,但它显然适用于< table>)？这是否记录在W3C规范中？我可以将这种行为放在未来吗？
PS：我用IE 7,IE 8,Opera 10.10,Safari 4.0.4,Chrome 3.0,Firefox 3.5测试了这个页面,所有文件渲染完全相同(在Win7 x64上).
解决方法
这实际上是边框模型的优势,因为使用内容框很难实现100％-100px,但这里很简单.幸运的是,使用CSS3,我们可以选择使用边框来表示块级元素,它可能应该首先使用.我记得曾经听说IE5已经实现了边框,因为那是在愚蠢的规范中,然后改变了.
仔细阅读关于表格布局的CSS规范可能会确认是否是这种情况.
我刚才看到的问题是,如果我得到一个200px的高度,10px的边框和20px的填充,那么使用getCalculatedStyle(),浏览器告诉我他的高度是140px！尽管我特意将高度设置为200px.
问候,艾伦
