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;
}