在表格中设置"max-height"使其高度为零？

Question

这是片段(在JsFiddle上可用的演示)

#outer {
    display: table;
    height: 200px;
    width: 100%;
    background: gray;
}

#inner {
    width: 100%;
    background: blue;
    max-height: 100%;
}

<div id="outer">
    <img id="inner" src="http://jsfiddle.net/img/logo.png">
</div>

父元素使用display:table(由第三方框架设置),并max-height:100%在子元素中设置约束.

但是,正如上面的演示中所示(我使用的是Chrome 46.0),子元素的高度以某种方式变为"ZERO".

当我删除display:table父元素中的属性时,一切正常.

我检查了MDN文档的max-height.当提到max-height的百分比值时,它说:

百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则百分比值将被视为无.

正如我对我的演示所理解的那样,#inner元素的包含块被明确指定为#outer,因此max-height: 100%属性in #inner将等效于height: 200px.这是真的吗？有没有人对我哪里出错了？

谢谢!

Answer 1

如果您有父元素和子元素,并且父元素是display: table,则子元素是隐式的display: table-cell.(从技术上讲,子元素包装在一个匿名的表格单元格框中,实际的子元素本身不会改变,但在这个特定的情况下,它没有什么区别.)

所以你试图设置max-height一个表格单元格,然后你冒险进入未定义的行为:

在CSS 2.1中,'min-height'和'max-height'对表,内联表,表格单元格,表格行和行组的影响未定义.

对于它的价值,只有Chrome才会出现这个问题; 图像在Firefox和IE中按预期显示.但是,很难说哪种浏览器是对还是错.

正如我对我的演示所理解的那样,#inner元素的包含块被明确指定为#outer,因此max-height: 100%属性in #inner将等效于height: 200px.这是真的吗？有没有人对我哪里出错了？

没有,一个表格单元格的包含块不表本身,而是包含块表中的,因为一个表是一个表,而不是块容器箱.见10.1节:

2. 对于其他元素,如果元素的位置是"相对"或"静态",则包含块由最近的块容器祖先框的内容边缘形成.

根据MDN和规范所说的max-height(这些词几乎完全相同),使用的max-height 应该是none.无论出于何种原因,Chrome都将其钳制为零.无论是故意这样做是为了推动家庭关于未定义行为的观点(因为Firefox如此喜欢用暴露的表格单元格做),或者是由于无意识的浏览器怪癖,还有待讨论,但我建议你去寻找针对display: table您的第三方框架强加的限制的其他一些解决方法.