Html 设置“；“最大高度”；在一张桌子里面，它的高度是零？_Html_Css_Css Tables

Html 设置“；“最大高度”；在一张桌子里面，它的高度是零？

html css

Html 设置“；“最大高度”；在一张桌子里面，它的高度是零？,html,css,css-tables,Html,Css,Css Tables,以下是代码片段（演示可在上获得） #外部{ 显示：表格；高度：200px；宽度：100%；背景：灰色； } #内在的{ 宽度：100%；背景：蓝色；最大高度：100%； } 当您有一个父元素和一个子元素，并且父元素是display:table，子元素隐式地是display:table cell。（从技术上讲，子元素被包装在一个包中，而实际的子元素本身不会改变，但在这个特定场景中，它并没有什么区别。）因此，您试图在表格单元格上设置max height，此时您将进入：在CSS 2.1

以下是代码片段（演示可在上获得）

#外部{
显示：表格；
高度：200px；
宽度：100%；
背景：灰色；
}
#内在的{
宽度：100%；
背景：蓝色；
最大高度：100%；
}

当您有一个父元素和一个子元素，并且父元素是

display:table

，子元素隐式地是

display:table cell

。（从技术上讲，子元素被包装在一个包中，而实际的子元素本身不会改变，但在这个特定场景中，它并没有什么区别。）

因此，您试图在表格单元格上设置

max height

，此时您将进入：

在CSS 2.1中，“最小高度”和“最大高度”对表、内联表、表单元格、表行和行组的影响未定义

值得一提的是，只有Chrome表现出这个问题；该图像在Firefox和IE中的显示与预期一致。不过，很难说哪个浏览器是对的还是错的

我在演示中了解到，

#inner

元素的包含块被明确指定为

#outer

，因此

#inner

中的

最大高度：100%

属性将等同于

高度：200px

。这是真的吗？有人知道我哪里出错了吗

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

对于其他元素，如果元素的位置为“相对”或“静态”，则包含的块由最近的块容器祖先框的内容边构成

根据MDN和规范关于

max height

的说明（单词几乎完全相同），使用的

max height

应该是

none

。不管出于什么原因，Chrome将其限制为零。无论是故意这样做是为了让大家明白未定义的行为（因为Firefox非常喜欢使用不存在的表格单元格元素），还是由于无意中的浏览器怪癖，都有待讨论，但是我建议您为第三方框架施加的

display:table

限制找到一些其他解决方法。