最大高度元素内的 Safari 高度 100% 元素

Question

我想弄清楚为什么 Safari 不会读取其父项的 max-height 属性作为高度。 Chrome 和 Firefox 都能正确读取它，但 Safari 似乎忽略了父级的最大高度，而是捕获了页面的全高。

可以看到here

CSS:

body, html {
    height: 100%;
    margin: 0;
}
div {
    height: 100%;
    max-height: 300px;
    width: 100px;
}
div span {
    background: #f0f;
    display: block;
    height: 100%;
}

标记:

<div>
    <span></span>
</div>

我在 OSX 10.8.5 上使用 Safari 6.0.5。

Answer 1

出现此问题是由于报告的 Webkit 错误:

Bug 26559 - When a block's height is determined by min-height/max-height, children with percentage heights are sized incorrectly

Chrome 现在似乎已修复此问题，但 Safari 尚未修复。

唯一对我有用的非 JavaScript 解决方法是在父元素上使用绝对定位:

div {     
    position: absolute;
}

演示

Try before buy