所有现代浏览器在 <table> 标签中表现出意料之外的盒模型行为

Question

所有现代浏览器在 <table> 标签中表现出意料之外的盒模型行为

7

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

和一个。它们并排排列，具有完全相同的宽度、高度和边框CSS。令人意外的是，我测试过的所有浏览器都会呈现出像这样的文档： alt text http://img204.imageshack.us/img204/853/screen1tu.png

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

然而，

<table>PS

被渲染为内容区域高29像素（红色像素），下面有1像素的边框（总高度为30像素，因此在这种情况下，CSS高度被解释为“包括边框”）。我的问题是，为什么盒模型有例外情况（元素的高度不应包括边框，但对于来说显然是包括的）？这在W3C规范中有记录吗？我可以依赖这种行为吗？：我在IE 7、IE 8、Opera 10.10、Safari 4.0.4、Chrome 3.0和Firefox 3.5上测试了这个页面，所有浏览器都呈现出完全相同的文档（在Win7 x64上）。

- Milan Gardian

一张没有任何行或单元格的表格是否是有效的标记？它有用吗？只是好奇。 - Jamie Ide

@Jamie Ide：这只是最简单的例子，可以说明行为。我的实际表格自然有单元格。但无论如何呈现（有单元格或没有单元格），高度都被解释为包括边框，即使在所有现代浏览器的标准模式下，呈现效果都是相同的。 - Milan Gardian

3个回答

2

我发现当定义单元格的高度时会出现类似的问题，很明显表格使用的是border-box模型而不是content-box。我强烈怀疑，但目前没有证据支持，这是为了保持与基于表格的布局的兼容性。例如，如果您将宽度设置为100％并添加边框或边距，则会出现滚动问题（假设您的表格占用整个窗口）。

这实际上是border-box模型的优势，因为使用content-box很难实现100％-100px，但在这里却很简单。幸运的是，使用CSS3我们可以选择为块级元素使用border-box，这可能应该是一开始就应该有的。我记得曾经听说IE5实现了border-box，因为那是愚蠢的规范，后来改变了。

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

我现在遇到的问题是，如果我给一个单元格高度为200px，边框为10px，填充为20px，然后使用getCalculatedStyle()，浏览器告诉我高度为140px！尽管我明确将高度设置为200px。

问候， Allan

- Allan Jardine

谢谢Allan，你的回答很有道理 :-）。我不知道在CSS3中可以选择性地选择盒模型的类型 - 这是个好消息。我喜欢IE风格的模型，正如你提到的那样，当使用100％的宽度或高度时。 - Milan Gardian

-1

在CSS中为#tbl添加border-collapse: collapse。您仍然具有单元格填充。

- Wyatt Barnett

表格中没有单元格。添加边框合并不会使<table>遵循盒模型。 - Milan Gardian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- graphicdivine · Accepted Answer

非常好奇。我可以让它们表现得完全相同，但只有在表格中包含<tr>和<td>并将它们都设置为border-collapse: collapse 和 display: table时，才能看到这一点，您可以在此处查看：http://jsbin.com/ijila。虽然这不是一个解决方案，但可能有助于理解问题。