IE6でmin-widthを実装する方法のまとめ
- 2008年03月26日
- category:XHTML/CSS, javascript
- Comment(2)
- Trackback(1)
先日書いた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を使うことが多いかなぁ。
- Prev Entry
- IE6のmin-width、min-heightハックに関して
- Next Entry
- 上下中央ハックの別の使い道
コメント一覧
-
デッドリー 2008年3月26日 21時31分
俺もmin-widthについて検索してみて各種記事を拝見しましたが、以下の記事が俺の中ではしっくりきました(CSS的にValidとかどうかはおいといて)。
http://youmos.com/news/iefixed_htc -
hoka(管理人) 2008年3月26日 21時49分
>デッドリーさん
なるほど、Behaviorで実装する方法ですね。
expression直書きで実装するよりこっちが見やすいかも。今後使ってみます!

トラックバック一覧
CSS Lecture 2008年10月22日 13時25分
「min-width」「min-height」「max-wi…
CSSのの中に「min-width」「min-height」「max-width」「max-height」と言うプロパティがあるのですが、IE6ではそのままでは使えな (more…)