IE7にも実装されたCSSのmin-width,max-width（min-height,max-heightも）は、リキッドレイアウトを採用する場合には非常に便利な属性なのだが、IE6で対応していないので、なんとか適用する方法を調べた。
まず、普通のモダンブラウザに適用するwidthとheightを適用する。
#container {
min-width: 600px; max-width: 1200px;
}
次に、IE6用にはJavaScriptのexpressionメソッドを使用して適用する。
* html #container {
width:expression(document.body.clientWidth < 600? “600px” :
document.body.clientWidth > 1200? “1200px” : “auto”);
}
ちなみにexpressionメソッドはIEに特有のもの（ダイナミックプロパティという）なので他のブラウザでは無視されるものの、余計なコードを読み込ませないように、「* html」hack（IE6以下だけに読み込ませるハック）を使用して分離するのが吉。
Trackback URL
One Comment
参考にさせていただきます。
ありがとうございました。
5 Trackbacks/Pingbacks
[...] IE6でmin-width,max-widthを実装する：CSS | Tech de Go [...]
メモ：IE6でmin-height…
別件で、久しぶりにCSSをいじってたんですが、IE6でmin-height（max-height、min-width、max-widthなんかも）が使えない問題に再度ぶつかる。
前にこの問題にあたったときは、面倒くさくて「IE対応….
IE6で「max-width」を使って、自動改行されない文字列を制御する方法…
clientWidthを基準にして数値を一定の範囲に丸めてしまうという方法ですから、ブロックのレイアウト時にしか使用できません。 今回は、ページ中に不規則に何度も現れる要素のmax-widthを…
リキッドスタイルに最大幅と最小幅を設定…
æè¿ããã®ããã°ãã¡ããã¡ããè¦ã«æ¥ã¦ãã人ã¯ãæ¯æ¥ãããã°ã®ã©ãããå¤åãã¦ããã…
IE6のmax-widthとmin-widthと、expressionについての覚え書き [CSS, JavaScript]…
max-widthのよくあるサンプル
IE6でmax-widthに対応しようと思って検索してみたらIE独自拡張のexpressionで実現しているケースが多く見られました。概要はこんな感じでしょうか。
*html #container {…
Post a Comment