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を使うことが多いかな。
- Prev Entry:IE6のmin-width、min-heightハックに関して
- Next Entry:上下中央ハックの別の使い道