Safari在max-height元素内的高度为100％的元素 [英] Safari height 100% element inside a max-height element

问题描述

我正试图弄清Safari为什么不将其父级的max-height属性读取为高度的原因。 Chrome和Firefox均可正确读取，但Safari似乎忽略了父级的最大高度，而是抓取了页面的整个高度。

I'm trying to figure out why Safari won't read the max-height attribute of its parent as the height. Both Chrome and Firefox will read it correctly, but Safari seems to ignore the parent's max-height and instead grabs the page's full height.

您可以在此处

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。

I'm using Safari 6.0.5 on OSX 10.8.5.

推荐答案

发生此问题是由于Webkit中报告了一个错误：

This issue happens due to a reported bug in Webkit:

错误26559-当块的高度由最小高度/最大高度确定时，具有百分比高度的子项的尺寸不正确

目前，这似乎已针对Chrome修复，但对于Safari尚未解决。

This seems to be fixed for Chrome by now, but not for Safari.

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

The only non-JavaScript workaround that worked for me, is using an absolute positioning on the parent element:

div {     
    position: absolute;
}

演示

购买前先试

这篇关于Safari在max-height元素内的高度为100％的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！