HOME
HTML/CSS
IE6とモダンブラウザにmin-widthを疑似的に指定する方法

IE6とモダンブラウザにmin-widthを疑似的に指定する方法

IE6はmin-widthに対応していませんが、Javascriptを使わず、CSSだけで擬似的にmin-widthを指定できるのでご紹介します。

min-heightを指定したい場合は、「IE6にもmin-heightを疑似的に実現させる方法」をご覧ください。

HTML

 
<div class="wrap">
    <div class="content">指定の幅まできたら、ウィンドウを縮めても、ボックスはそれ以上は縮まりません。このボックスだと幅500pxより小さくなりません。</div>
</div>

CSS

 
/* モダンブラウザ向け */
.wrap {
    min-width: 500px;
}
 
/* IE向け */
* html .wrap {
    border-left: 500px solid #FFFFFF; /* min-widthの幅を指定、背景色に合わせた色を指定 */
    zoom: 1; /* hasLayoutをON*/
}
 
* html .wrap .content {
    position: relative;
    margin-left: -500px; /* min-widthの幅を指定 */
    zoom: 1; /* hasLayoutをON*/
}

→min-widthを適用させたサンプル

モダンブラウザには普通にmin-widthを指定します。IEにはハックを使って指定します。 .wrapにborder-leftで最小幅を指定、.contentにmargin-leftで最小幅のマイナス値を指定、.wrapと.contentにhasLayoutをONにさせるzoom: 1;を指定。（height: 1%;とかでも構いません） .contentにposition: relative;を指定してあげないとレイアウトが崩れるので、これも必ず指定します。

IE6はまだ使っている人がいる（アクセス解析によると当サイトの訪問者の2割弱が使っている）ので、覚えておきたいテクニックですよね。来年ぐらいかな・・・IE6が消えるのは・・・

date 2010.10.29