IE6でCSSのmin-width(max-width)を利用する方法の覚書

by ·

CSSのmin-widthはリキッドレイアウト（英語ではfluid（流体）と呼ばれている）には便利な属性だが、、IE6では使えない!
この便利なmin-widthの動きをIE6で実現するにはいくつかの方法が考えられる。
tableやグラフィックを支え棒として利用する方法などが一般的で、他にはjavascriptやIEのexpressionメソッド（これもjavascript）を利用する方法などがある。
IEのexpressionメソッドが比較的スマートな方法だが、調べれた情報は自分が欲しいものとは微妙に違っていたので、ここでまとめて覚書。
※もちろん、expressionなんていうのはIEオンリーなので、あまり多様するのはどうかと思う。何となくIEブラウザにストレスをかけている様子なので、、注意が必要かも・・・

#wrapper {
    width: 80%;
    min-width:760px;
    margin-right: auto;
    margin-left: auto;
}

*html #wrapper {
  width:expression(document.body.clientWidth < 950? “”760px”” : document.body.clientWidth >= 950? “”80%”” : “”auto””);
}

#wrapperに対してwidthを80パーセントに設定し、センタリングレイアウト。最小幅は760ピクセルに設定。
*ハック（IE6以下のみ有効）で#wrapperに対してexpressionメソッドを指定。ブラウザ幅が950ピクセル未満の場合はwidthを760ピクセルに、ブラウザ幅が950以上の場合はwidthを80パーセントに。

おすすめ