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が適用されているように見せてるようです。

LINK:Easiest cross-browser CSS min-height(英語)

関連する記事

この記事が気に入ったら
「いいね!」しよう

この記事が気に入ったら
「いいね!」しよう

最新情報をお届けします

コメント