最小と最大値の指定

そもそも、毎度お決まりのIE問題。IE6以下ではminやmaxによる幅・高さの指定に対応していません。なので、IE6以下でも最低限の閲覧環境を確保するために(その度合いにもよりますが)、IE6以下をフォローするためのコードについて解説。

最小値の指定

幅:最小950pxの場合

最初にmin-heightで最小値を指定、その後にIE6用にheightでautoと最小幅を指定するだけ。

#page{
 min-width: 950px;
 width: auto !important;
 width: 950px;
}

最大値の指定

幅:最大950pxの場合

最初にmax-heightで最大値を指定、その後にIE独自の拡張機能「expression」で最大値を動的に指定します。

#page{
 max-width: 950px;
 width:expression(this.clientWidth > 951? "950px" : "auto");
}

最小/最大の両方を指定

幅:最小600px、最大950pxの場合

上記の最小と最大を合わせて使うだけです。

#wrap{
 min-width: 600px; /* 最小幅 */
 max-width: 950px; /* 最大幅 */
 width: expression(document.documentElement.clientWidth < 601? "600px " : document.documentElement.clientWidth > 951? "950px" : "auto");
}