先日書いたmin-widthとmin-heightに関する記事の補足です。以下のようなコメントをいただいたのでIE6でmin-widthを実装する方法をまとめました。

たしかに、この方法に若干違和感感じあります。
例えばどういう実装方法があるのでしょうか？
あまり使う機会がないもので。

javascriptのライブラリを使う

ライブラリを使う場合は下記などがあります。お手軽です。
min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript[to-R]

expressionで実装する

expressionを使って、CSS内でjavascriptを使う方法だとかなりシンプルに書けます。
参考： [CSS]IEで、min-widthやmax-widthを実現する方法 | コリス

#foo {
  min-width: 600px;
  width: expression(document.body.clientWidth < 602? "600px" : "auto");
}

max-widthも同時に書く場合は

#foo {
  min-width: 600px;
  max-width: 900px;
  width: expression(document.body.clientWidth < 602? "600px" : document.body.clientWidth > 900? "900px" : "auto");
}

javascriptを自分で書く

expressionで実装した場合はCSSがvalidじゃなくなりますので、CSSがvalidじゃないとダメだという人はjavascriptで同じ内容を自分で書くといいかなと思います。以下は一例です。（使いたい方はご自由にどうぞ）

(function(){
  if(navigator.userAgent.indexOf("MSIE 6.0")==-1) return;
  var min_max_width = function(){
    var w = document.body.clientWidth;
    document.getElementById("wrapper").style.width = w < 602? "600px" : w > 900? "900px" : "auto";
  };

  attachEvent("onload" , min_max_width);
  attachEvent("onresize", min_max_width);
})();

CSSのみで実装する

CSSのみで実現する方法もあるみたいです。僕は実際試したことがないので、詳しくは下記記事を参照してください。
Lucky bag::blog: IE で min-width を指定する方法

実装の方法はいろいろですね。僕は最近は自分で書いたjsを使うことが多いかなぁ。

関連書籍

速習Webテクニック スタイルシート 上級レイアウト (Quick Master of Web Technique)
河内 正紀

Prev Entry

IE6のmin-width、min-heightハックに関して

Next Entry

上下中央ハックの別の使い道

最近の記事

1. 第3回CakePHP勉強会にいってきた
2. Mac OS X（Leopard）のローカルにWordpressをインストールしたときのメモ
3. font-familyの憂鬱
4. DreamweaverCS4のベータ版でLiveView機能を試してみた
5. 第18回WebSig会議にいってきた
6. font-sizeのパーセント表記一覧
7. target疑似クラスを用いて、CSSのみでLightBox風UIを実現する方法
8. 今更ながらjQueryのプラグインThickBox3.1
9. 上下中央ハックの別の使い道
10. IE6でmin-widthを実装する方法のまとめ