Question

以下是一个参考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元标记的组合应该将任何现代浏览器切换到它支持的最符合标准的模式。该文档包含两个绝对定位的元素，<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上）。

Answer 1

非常好奇。我可以让他们的行为相同，但只能在表格中加入<tr>和<td>并将其设置为border-collapse: collapse 和 display: table ，你可以在这里看到：

http://jsbin.com/ijila

这不是一个解决方案，但它可能会对它有所帮助。

Answer 2

在定义单元格的高度时，我看到类似的问题，而且表格肯定会使用边框框模型，而不是内容框。我强烈怀疑，但目前没有证据支持这一点，这是为了保持与基于表格的布局的兼容性。例如，如果您要设置宽度100％以及边框或边距，那么您将遇到滚动问题（假设您的表占用了整个窗口）。

这实际上是边框模型的优势，因为使用内容框很难实现100％-100px，但这里很简单。幸运的是，使用CSS3，我们可以选择使用边框来表示块级元素，它可能应该首先出现在块级元素中。我记得有一次听说IE5已经实现了边界框，因为那是在愚蠢的规范中，然后改变了。

仔细阅读有关表格布局的CSS规范可能会确认是否属于这种情况。

我刚才看到的问题是，如果我的单元格高度为200px，边框为10px，填充为20px，则使用getCalculatedStyle（），浏览器会告诉我高度为140px！尽管我特意将高度设置为200px。

此致艾伦

Answer 3

不是答案，只是我的两分钱：

使用display时遇到了一些问题：table为div。它的工作方式与div略有不同，特别是边界包含。我在这里聊了一下：

Divs in Chrome

Answer 4

向border-collapse: collapse css添加#tbl。你仍然有细胞填充。

<table> </table>的所有现代浏览器中出现意外的盒子模型行为

4 个答案: