max-height
解釈が腐っている件Safari 2.0.2 (v416.12) において、任意のボックスが以下の条件を全て満たす時、そのボックスは本来あるべき高さで表示されない。
position:absolute
または position:fixed
max-height:none
を明示的に指定height
が auto
以外height
値を下回る感触的には、強制的に「 height:ボックス内容の算出高
」とされる感じ。本来であれば、「ボックス内容の算出高」がなんであれ、ボックス自体は height
指定値の分だけの高さがキッチリ確保されてなければならないはず。
つまりこの場合、いくら height:10000px
とかしたところで、ボックスが内部に持っている要素ボックスあるいはテキストボックスの算出高が 10px であったらば、ボックスは結局 10px の高さしか無い状態で表示される。極端な例を出せば、ボックスが何も内包していない(空っぽ)の場合は、高さゼロとなって、完全に画面から消えるハメとなる。
Added support for min/max-width/height for positioned elements.の影響と思われます。
position
が static
あるいは relative
の場合は問題なし。Safari 2.0.1 を含むそれ以前のバージョンでは問題なし (ただし min-height
/ max-height
を解釈するようになったのは、わりと最近のバージョン (2.0 以降?) です)。
max-height
プロパティは、そのボックスの高さを指定値に制限する。初期値は none
であり、その場合はボックスの高さを制限しない。(つまり height
に none
以外の値が指定されているなら、素直に height
値の高さになる)
<div class="testbox">
<div class="topleft"></div>
</div>
div.testbox {
position: relative;
margin: 0;
padding: 0;
width: 100px;
height: 100px;
background: #ccc;
}
div.testbox div.topleft {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 20px;
height: 20px;
max-height: none;
background: red;
}