Html <；的所有现代浏览器中出现意外的框模型行为；表>；_Html_Css

Html <；的所有现代浏览器中出现意外的框模型行为；表>；

html css

Html <；的所有现代浏览器中出现意外的框模型行为；表>；,html,css,Html,Css,以下是说明我的问题的参考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" /> <ti

以下是说明我的问题的参考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>


箱式模型试验
html，正文{空白：0；填充：0；背景色：#808080；}
#框{位置：绝对；顶部：20px；左侧：20px；背景色：绿色；}
#tbl{位置：绝对；顶部：20px；左侧：40px；背景色：红色；}
.common{宽度：20px；高度：30px；边框底部：实心1px黑色；}

HTML5 doctype和X-UA兼容元标记的组合应该将任何现代浏览器切换到它支持的最符合标准的模式。文档包含两个绝对定位的元素，一个

和一个

。它们并排排列，宽度、高度和边框完全相同。出乎意料的是，我测试的所有浏览器都会将文档呈现为这样：

（绿色）遵循长方体模型。内容区域高30像素（绿色像素），下面有一个边框（总高度为31像素，CSS高度指令被解释为“不包括边框”）

但是，内容区域呈现为29像素高（红色像素），下方有一个边框像素（总高度为30像素，因此在这种情况下，CSS高度被解释为“包括边框”）

我的问题是，为什么长方体模型会有例外（元素的高度不应该包括边框，但对于

，它显然包含边框）？W3C规范中有记录吗？我将来能依靠这种行为吗

PS：我用IE 7、IE 8、Opera 10.10、Safari 4.0.4、Chrome 3.0、Firefox 3.5测试了这个页面，所有这些都呈现了完全相同的文档（在Win7 x64上）。

在

css中添加一个边框折叠：折叠
。你还留着电池填充物。
很奇怪。我可以让它们的行为相同，但只有在表中包含一个
和
，并将它们都设置为边框折叠：折叠
和显示：表
，如下所示：

这本身并不是一个解决方案，但它可能有助于阐明这一点。
在定义单元格高度时，我也看到了类似的问题，而且显然，表使用的是边框框模型，而不是内容框。我强烈怀疑，但目前没有证据支持这一点，这是为了保持与基于表的布局的兼容性。例如，如果要设置宽度100%和边框或边距，则会出现滚动问题（假设表格占用整个窗口）
这实际上是border box模型的优点，因为使用内容框很难实现100%-100px，但在这里很简单。幸运的是，有了CSS3，我们可以选择为块级元素使用边框框，这可能是它首先应该使用的。我记得有一次听说IE5实现了border box，因为它是在愚蠢的规范中实现的，后来就改变了
仔细阅读有关表格布局的CSS规范可能会确认是否存在这种情况
我刚才看到的问题是，如果我得到一个高度为200px、边框为10px、填充为20px的单元格，然后使用getCalculatedStyle（），浏览器会告诉我他的高度是140px！尽管我特别将高度设置为200px
问候,，
Allan
表中没有单元格。添加边框折叠不会使其遵循长方体模型。没有任何行或单元格的表是否有效标记？它有用吗？只是好奇而已。@Jamie Ide:这只是说明这种行为的最简单的例子。我的实际表格自然有单元格。但无论是单元格还是无单元格，渲染都是一样的——高度被解释为包含边框，即使在所有现代浏览器的标准模式下也是如此。感谢您分享您的实验。是的，根据您的建议更新CSS将使高度相同（我发现有趣的是，表没有切换到W3C框模型，而是将DIV切换到IE框模型，这样两个元素现在都有30像素高，包括边框）。然而，我仍在寻找这种行为的原因，而不是治疗症状的方法，因此，如果您有其他想法，请与我们分享……谢谢Allan，您的回答很有道理：-）。我不知道你们可以在CSS3中有选择地选择盒子模型的类型——这是个好消息。当使用100%宽度或高度时，出于与您提到的完全相同的原因，我更喜欢IE样式的模型。