IE6にもmin-heightを疑似的に実現させる方法

IE6はmin-heightが使えないのですが、Javascriptを使わず、CSSだけを使って簡単にmin-heightを実現する方法がありますので、ご紹介します。

min-widthを指定したい場合は、「IE6とモダンブラウザにmin-widthを疑似的に指定する方法」をご覧ください。

HTMLコード

 
<div>テキストテキストテキストテキスト</div>
 

今までは下記のようなCSSハックを使ってmin-heightを実現してきました。

今までのmin-heightを実現させる方法

 
div {	/*全ブラウザに適用*/
    height: 150px;
}
html>body div {	/*モダンブラウザに適用*/
    min-height: 150px;
    height: auto;
}
 

　　

ですが、もっとスマートに簡単なコードで実現できる方法を紹介します。

スマートに簡単なコードで実現させる方法

 
div {
    min-height: 150px;	/*モダンブラウザに適用*/
    height: auto !important;	/*モダンブラウザに適用*/
    height: 150px;	/*全ブラウザに適用*/
}
 

→IE6にもmin-heightを実現させるサンプル

!importantを記述したら、そのプロパティを優先するのですが、IE6では同一ブロック内では!importantが無視されるというバグがあるので、その下にまたheight: 150px;をIE6のみに適用させています。
じゃあ、min-heightだけでなくmin-widthも同じように適用させることができるのではないか？と思いますが、残念ながらmin-widthは出来ないんです。 このテクニックは、ボックスサイズが内容物に合わせた大きさへ強制的に調整されるというバグを利用して実現できるもので、widthの場合、内容物の多少に関わらず指定した幅で折り返してしまうからです。
min-width、max-height、max-widthも適用させたいと思うならJavascriptを使うのが無難だと思います。

blog comments powered by Disqus