IE6では「min-height」が使えない
またまたIE6のネタです。なんだか最近、確実にIE6のおかげで作業量が何割増しになっている気がします。
IE6料金って取れないだろうか。。。
今回は、IE6では対応していないcssプロパティ「min-height」を実現する方法です。
コードから先に出すと、以下のようになります。
.sample { min-height: 300px; height: auto !important; height: 300px; }
通常のブラウザの場合、heightについては!importantが優先されるので「auto」、min-heightについては「300px」が適応されます。
一方、IE6の場合、min-heightは効きません。
また、「同一要素内で同じプロパティがある場合は後方を適用する」というバグ?があるので、 height「300px」のみが適応されます。
さらには、IE6では高さを設定しても、中の要素がそれを越えると押し出されるように伸びるというバグ?があるので、最低「300px」、それ以上だと高さが可変するというmin-heightと同じような動きをします。
しかし、min-weightはこの理論ではうまくいきません。
どなたか知りませんか?
コメントする