IE6用max-width・min-width

[Attention]
この記事の情報は「やってみたらできた」というメモ程度の内容です。Javascriptについての知識もあまり持ち合わせていないため、深い考察などもできていません。ご了承ください。
[Attention]



「Nefert」で配布しているテンプレートは、今のところ全て幅可変（上限・下限あり）となっています。

幅可変のレイアウト、いわゆるリキッドレイアウトは、表示するウィンドウサイズに合わせて自動的にレイアウトが変化するため、画面が大きい環境でも小さい環境でも（それなりに）うまく表示されるというのが利点です。ただし、リキッドレイアウトは「画面幅がどれくらい大きくなるか分からないので、用意する画像も必要以上に大きくなってしまう」という弱点もあります。

その弱点を補い、リキッドレイアウトの利点を生かすために用いられるのが、max-width、min-widthというCSSのプロパティです。

このプロパティは、それぞれ要素の最大幅・最小幅を指定することができます。
max-width、min-widthを指定することで、画面が小さい時には余裕を持たせて表示し、画面が大きいときには大きくなりすぎないように幅を抑制するといった柔軟な表示が可能になります。また、max-widthを指定することで、用意する画像サイズも必要以上に大きくならないようにすることができます。

ただし、max-width、min-widthプロパティは、IE6では対応しておらず、使うことができません。

そこで、IE6に対してはjavascriptのexpressionメソッドを用いて擬似的にmax-width、min-widthプロパティを適用させています。

まず、IE7やFirefox、Opera、Safariなどの既に対応しているブラウザに対しては、そのままmax-width、min-widthを指定しています。

#wrapper {
    min-width : 600px;
    max-width : 900px;
}

IE6に対してはスターハック（IE6以下でのみ読み込まれるようにするCSSハック）を用いてexpressionメソッドを使用します。

* html #wrapper {
    width : expression(
                (document.documentElement.clientWidth > 800)? "800px" :
                (document.documentElement.clientWidth < 500)? "500px" :
                "auto"
            );
    height : 1%;
}

やっていることは、「表示領域の幅が800px以上だったらwidth : 800px;に、500px以下だったらwidth : 500px;するよ。それ以外は自動的に変化していいや」ということです。
「max-width IE6」という風に検索すると、「document.documentElement.clientWidth」ではなく「document.body.clientWidth」で同様の方法を紹介しているページが多数あります。これはIEの互換モード・標準モードの違いのようです（前者が標準モード、後者が互換モード用の記述）。
最初、互換モード用の記述を使ったのですが、画面サイズを変更するとある条件下でブラウザがフリーズするという状況に陥ったので、標準モード用の記述を使うようにしました。

ちなみに、max-width、min-widthで直接指定している値とexpressionで指定している値が違うのは、IE6は内容にあわせて指定したサイズよりも幅が大きくなってしまうというバグがあることを考慮した結果です。

max-width、min-width導入時の参考になれば幸いです。

参考にしたページは以下の通りです。感謝(*'-'*)
http://d.hatena.ne.jp/nagaton/20070603/1180862831
http://youmos.com/reference/cssjavascriptmin-width_max-wid