9

Safari が親の max-height 属性を高さとして読み取らない理由を理解しようとしています。Chrome と Firefox の両方が正しく読み取りますが、Safari は親の最大高さを無視するようで、代わりにページ全体の高さを取得します。

ここで見ることができます

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 を使用しています。

4

2 に答える 2

24

この問題は、Webkit で報告されたバグが原因で発生します。

バグ 26559 - ブロックの高さが min-height/max-height によって決定される場合、パーセンテージの高さを持つ子のサイズが正しくない

これは現在、Chrome では修正されているようですが、Safari では修正されていません。

私にとって有効だった JavaScript 以外の唯一の回避策は、親要素で絶対配置を使用することです。

div {     
    position: absolute;
}

デモ

購入前にお試しください

于 2013-10-01T16:10:44.903 に答える