以下是一个参考HTML文档,说明了我的问题:
<!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元标记的组合应该将任何现代浏览器切换到它支持的最符合标准的模式.该文档包含两个绝对定位的元素a <div> 和a <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上).
小智 2
我在定义单元格的高度时看到了类似的问题，并且表格肯定使用边框框模型，而不是内容框。我强烈怀疑，但目前没有证据支持这一点，这是为了保持与基于表格的布局的兼容性。例如，如果您将宽度设置为 100% 并设置边框或边距，那么您将遇到滚动问题（假设您的表格占据整个窗口）。
这实际上是 border-box 模型的优点，因为很难用 content-box 实现 100%-100px，但在这里微不足道。幸运的是，使用 CSS3，我们可以选择对块级元素使用边框，这可能应该放在首位。我记得有一次听说 IE5 已经实现了 border-box，因为那是在愚蠢的规范中，然后又改变了。
仔细阅读有关表格布局的 CSS 规范可能会确认情况是否如此。
我刚才看到的问题是，如果我得到一个高度为200px、边框为10px、填充为20px的单元格，然后使用getCalculatedStyle()，浏览器告诉我他的高度是140px！尽管我特意将高度设置为 200px。
问候，艾伦
