min-widthを使うときのIE6への配慮

min-widthは、リキッドデザインでHTMLコーディングするときに、横幅の最小値を設定しておけるCSSのプロパティです。これを設定しておくことにより、横幅が一定の値以下には縮まらないように設定しておくことができます。
ブラウザのウィンドウサイズを極端に小さくしたときに、レイアウトが崩れるのを防ぎたいときに便利です。
しかし、IE6はmin-widthに対応していません。
IE6のユーザーはいまだに結構いるため、無視するわけにもいかず、別の方法でIE6向けの対応します。
こんなとき、IE独自に実装されているダイナミックプロパティのexpressionメソッドを用いる方法があります。

まず、IE6以外の新しいブラウザ向けにはmin-widthで横幅を指定しておきます。

#contents {
min-width: 950px;
}

で、その下に以下を書きます。

* html #contents {
width:expression(document.body.clientWidth < 952? "950px" : "auto");
}

一応、関係ないブラウザには余計なものは読み込ませないほうがいいかもしれない・・・という意味で、スターハック（「* html」の部分）を使っていますが、上にも書いた通りmin-widthはIE独自のものなので、以下のようにまとめてしまっても特に問題はないと思われます。

#contents {
min-width: 950px;
width:expression(document.body.clientWidth < 952? "950px" : "auto");
}

ちなみに「auto」の部分は通常のとき、つまりmin-widthでもmax-widthでもないときの横幅です。（ここではmax-widthは使ってませんが）
リキッドデザインの場合、auto以外でもパーセントで横幅を指定しておくことが多いと思います。
例えば通常時の横幅を95%にしている場合は、以下のようになるわけです。

* html #contents {
width:expression(document.body.clientWidth < 952? "950px" : "95%");
}

また、僕が最初にこの方法を試したときに気が付いた点を2つ書いておきます。

1ページの中に複数使う場合

この方法を1ページの中で複数の場所に使う必要があって試したのですが、なぜか1つしか有効に動作しなくて最初は困りました。
いろいろやっていたら偶然気がついたのですが、これを複数使うときは、同じ値にするとちゃんと動いてくれるようです。つまり、例えば、

* html #header {
width:expression(document.body.clientWidth < 862? "860px" : "auto");
}
* html #contents {
width:expression(document.body.clientWidth < 952? "950px" : "auto");
}

↑としていた場合、片方しかちゃんと有効になってくれませんでした。
以下↓のように大きい値のほうに揃えてみたところ、どちらも有効に動作しました。

* html #header {
width:expression(document.body.clientWidth < 952? "950px" : "auto");
}
* html #contents {
width:expression(document.body.clientWidth < 952? "950px" : "auto");
}

IE6がフリーズする場合の解決方法

お気付きの方も多いと思いますが、上に書いている例では「952」という値と「950」という値のように、値を2ピクセルずらしてあります。
最初はどちらも950として試したのですが、IE6で表示確認を行ったところ、なぜかは分かりませんが何度やってもブラウザ（IE6）が固まって（フリーズして）しまって使い物になりませんでした。

こりゃダメだと思いつつネットで調べていたところ、同様の方法を解説しているサイトの中には、上のように2ピクセルくらい値をずらしているものがあることに気が付き、ダメ元で真似して2ピクセルずらしてみたところ、IE6はフリーズせずにうまくいきました。
とは言っても、それらのサイトにもなぜ値をずらしているのかは書いていなかったのでその理由は不明のままです。

というわけでとりあえず2ピクセルずらすことにしました。
IE6のバグなんでしょうか？ちなみにたぶん「2」じゃなくてもいいと思われます。