Webtech Walker

IE6でmin-widthを実装する方法のまとめ

先日書いた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のみで実現する方法もあるみたいです。僕は実際試したことがないので、詳しくは下記記事を参照してください。

IE で min-width を指定する方法 - lucky bag

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

このエントリーをはてなブックマークに追加