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 document for max-height。当提到max-height的百分比值时，它说：

百分比是根据高度来计算的生成的框包含块。如果含有的高度未明确指定块（即，它取决于内容高度），这个元素并不是绝对定位的百分比值被视为无。

正如我对我的演示所理解的那样，#inner元素的包含块明确指定为#outer，因此max-height: 100%中的#inner属性将等同于{{1 }}。这是真的吗？有没有人对我哪里出错了？

谢谢！

Answer 1

如果您有父元素和子元素，并且父元素为display: table，则子元素将隐式display: table-cell。（从技术上讲，子元素包含在anonymous table-cell box中，而实际的子元素本身并没有改变，但在这种特定情况下，它并没有什么区别。）

因此，您尝试在表格单元格上设置max-height，此时您正冒险进入undefined behavior：

在CSS 2.1中，＆＃39; min-height＆＃39;和＆＃39; max-height＆＃39;表，内联表，表格单元格，表格行和行组未定义。

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

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

不，表格单元格的包含块不是表格本身，而是表格的表格，因为表格是表格，而不是块容器框格。见section 10.1：

对于其他元素，如果元素的位置是相对的＆＃39;或者＆＃39;静态＆＃39;，包含块由最近的块容器祖先盒的内容边缘组成。


根据MDN和规范对max-height的说法（单词几乎完全相同），使用的max-height 应为none。无论出于何种原因，Chrome都将其钳制为零。无论是故意这样做是为了推动家庭关于未定义行为的观点（因为Firefox如此喜欢用暴露的表格单元格做），或者是否由于无意识的浏览器怪癖而引起争论，但我建议您为第三方框架强加的display: table限制找到其他解决方法。

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

1 个答案: