CSSハックを使わずに「min-height」「min-width」をIEで実現する最も簡単な方法

IE6ではmin-heightやmin-widthがききません。デザインの都合上、特にmin-heightを使いたい場面は多いかと思います。

今回はそんな時に役に立つTips。min-heightやmin-widthをCSSハックやブラウザごとのスタイルシートを使わずに簡単に実装する方法を紹介します。

「min-height」「min-width」をIEで適用する方法

下記のように記述すれば実現できます。

Cross Browser min-height

.foo {
min-height:100px;
height: auto !important;
height: 100px;
}

Cross Browser min-height

.bar {
min-width:100px;
width: auto !important;
width: 100px;
}

IE6では「!imporant」が無視されるため、直下の「height:100px」を認識していることになります。また、IE6はコンテンツ量に合わせてボックス要素の大きさが変わるバグがあり、それを利用してmin-heightが適用されているように見せてるようです。