HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

またまた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はこの理論ではうまくいきません。
どなたか知りませんか?

このエントリーをはてなブックマークに追加

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search