IE6でmin-widthを実装する方法のまとめ
- 2008年03月26日
- category:XHTML/CSS, javascript
- Comment(2)
- Trackback(0)
先日書いた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
- 上下中央ハックの別の使い道
トラックバックURL
http://webtech-walker.com/archive/2008/03/26142420.html/trackback
※トラックバックを受け付けてから表示するまでにしばらく時間がかかる場合があります。

コメント一覧
デッドリー 2008年3月26日 21時31分
俺もmin-widthについて検索してみて各種記事を拝見しましたが、以下の記事が俺の中ではしっくりきました(CSS的にValidとかどうかはおいといて)。
http://youmos.com/news/iefixed_htc
hoka(管理人) 2008年3月26日 21時49分
>デッドリーさん
なるほど、Behaviorで実装する方法ですね。
expression直書きで実装するよりこっちが見やすいかも。今後使ってみます!