意外盒模型行为<table>

以下是引用HTML文档，说明我的问题：意外盒模型行为<table>

<!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兼容meta标记的组合应该切换任何现代浏览器它支持的最符合标准的模式。该文件包含两个绝对定位的元素，<div>和<table>。它们并排排列，具有完全相同的宽度，高度和边框CSS。没想到，我测试了所有的浏览器渲染的文件是这样的：

alt text http://img204.imageshack.us/img204/853/screen1tu.png

的<div>（绿色）如下盒模型。内容区域高30像素（绿色像素），下方有1像素边框（总高度为31像素，CSS高度指令被解释为'不包含边框'）。然而，在内容区域29像素高（红色像素）下面带有1像素的边界（整体高度为30像素，因此在这种情况下，CSS高度被解释为'包括边界'）的情况下呈现该内容区域。

我的问题是，为什么盒子模型有例外（元素的高度不应包含边框，但它对于<table>很明显）？这是在W3C规范中记录的吗？我可以依靠这种行为走向未来吗？我测试了IE7，IE8，Opera10.10，Safari4.0.4，Chrome3.0，Firefox3.5这个页面，所有渲染文件都完全相同（在Win7x64上）。

来源

2010-01-13 Milan Gardian

是一个没有任何行或单元格有效的标记表？它有用吗？只是好奇。 – 2010-01-13 15:47:19

@Jamie Ide：这只是说明行为的最简单的例子。我的实际表格自然具有单元格。但无论（单元格还是没有单元格），渲染都是相同的 - 即使在所有现代浏览器的标准模式下，高度都被解释为包含边框。 – 2010-01-13 15:53:26

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

这实际上是边框模型的优点，因为使用内容框很难实现100％-100像素，但在这里是微不足道的。幸运的是，对于CSS3，我们可以选择使用块级元素的边框，这可能应该放在第一位。我记得曾经听说IE5已经实现了边界框，因为那是在daft规范，然后改变。

仔细阅读关于表格布局的CSS规范可能会证实是否属实。

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

问候，艾伦

来源

2010-01-14 13:22:44

谢谢艾伦，您的回答很有意义:-)。我不知道你可以有选择地选择CSS3中的盒子模型 - 这是个好消息。在使用100％宽度或高度时，我更喜欢IE风格的模型，其原因与您提到的完全相同。 – 2010-01-14 13:33:49

-1

向#tbl css添加border-collapse: collapse。你仍然有单元格填充。

来源

2010-01-13 15:32:24

表中没有单元格。添加边框折叠不会使

跟随框模型。 – 2010-01-13 15:36:51

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

http://jsbin.com/ijila

这不是一个解决方案，这样做，但它可能有助于抛开一些光。

来源

2010-01-13 23:10:09 graphicdivine

感谢您分享您的实验。根据你的建议更新CSS会使高度相同（我觉得有趣的是，不是将表格切换到W3C盒子模型，而是将DIV切换到IE盒子模型，以使两个元素现在高30个像素，包括边框）。但是，我仍然在寻找导致此行为的原因，而不是治疗症状的方法，所以如果您有其他想法，请分享... – 2010-01-14 07:24:05

不是一个答案，只是我的两分钱：表一个div：

使用显示器时，我遇到了一些问题。它的工作方式与div截然不同，特别是边界包含。我有一些关于它在这里聊天：

Divs in Chrome

来源

2010-11-24 17:35:05 Billeeb

意外盒模型行为<table>

回答

相关问题