Css 为什么绝对定位的表格不根据其上/左/右/下值计算宽度/高度?

Css 为什么绝对定位的表格不根据其上/左/右/下值计算宽度/高度?,css,Css,我有一个相对定位的外部,并且具有定义的大小。在它里面,我有一个绝对定位的对象,它的顶部,左侧,右侧和底部设置为零。我希望表被扩展以遵守上/左/右/下约束,但是,事实并非如此。相反,表维度是根据其内容计算的 如果我使用一个内部的而不是,那么它就会像我期望的那样工作。另一方面,如果我把display:table在内部,则其行为与表完全相同 我的问题是:为什么会发生这种情况?规范中在哪里定义了这种行为?或者它是浏览器中的一个bug(可能性很小) 我已经查过了,我已经读过了。我也查过了。我还搜索了Sta

我有一个相对定位的外部
,并且具有定义的大小。在它里面,我有一个绝对定位的
对象,它的
顶部
左侧
右侧
底部
设置为零。我希望表被扩展以遵守上/左/右/下约束,但是,事实并非如此。相反,表维度是根据其内容计算的

如果我使用一个内部的
而不是
,那么它就会像我期望的那样工作。另一方面,如果我把
display:table在内部
,则其行为与表完全相同

我的问题是:为什么会发生这种情况?规范中在哪里定义了这种行为?或者它是浏览器中的一个bug(可能性很小)

我已经查过了,我已经读过了。我也查过了。我还搜索了StackOverflow。而且,我仍然找不到一个解释来解释为什么表会有这样的行为

观看现场演示: 我可以在Chrome27和Firefox20.0上复制结果

HTML:


我找不到任何技术原因,但我认为当你考虑桌子应该是什么时,这是有道理的。div的默认显示是block,即内容块。因此,其默认宽度为100%。一个表只是扩展到您的内容


在您的示例中,如果将.table的宽度设置为100%,它的作用将是相同的。

我认为答案在于CSS2.1规范,特别是(我的重点):

请注意,本节覆盖了适用于计算宽度的规则,如第10.3节所述。特别是,如果表格的边距设置为“0”,宽度设置为“自动”,表格将不会自动调整大小以填充其包含的块。然而,一旦找到表格的“宽度”计算值(使用下面给出的算法,或在适当情况下使用其他依赖UA的算法),则第10.3节的其他部分适用。因此,例如,可以使用左右“自动”页边距将表格居中

如您所述,将
width
设置为
auto
,宽度将基于内容,而不是包含的块

在那一节的末尾还有一行,尽管我猜它还没有发生:

CSS的未来更新可能会引入使表自动适应其包含块的方法

还有:但是,如果表格是正常流程中的块级表格(“显示:表格”),UA可以(但不必)使用10.3.3中的算法来计算宽度并应用固定表格布局,即使指定的宽度为“自动”。但它不适用于这种情况,原因有两个:它不在正常的流中,并且浏览器没有实现它。
<div class="box">
    <table class="table">
        <tr>
            <td>Hey!</td>
        </tr>
    </table>
</div>
<div class="box">
    <div class="table">Hey!</div>
</div>
<div class="box">
    <div class="table" style="display: table;">Hey!</div>
</div>
div.box {
    position:relative;
    border: 2px dashed red;
    background: #800;
    width: 100px;
    height: 50px;
}

.table {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    margin: 0;
    border: 3px double blue;
    background: #CCF;
    table-layout: fixed;
    border-collapse: collapse;
}