IE6でmin-Widthやmax-heightを適応させる
前回のエントリー「ヘッダーとフッターを固定して、PNGの透過画像を用いて立体的に見せる(IE6対応)」でヘッダー・フッターを固定させるレイアウトを作ったのだけれど、どうせならリキッドレイアウトにさせようと思い。width:100%でカチャカチャ作っていた。
で、ヘッダーとかにfloatのleft,rightでパーツをレイアウトしていたのだけれど、
ウィンドウを極端に小さくした場合floatしたパーツが崩れてしまうことがある。
と言うわけで、min-widthを設定しようと思い「#header {min-width:800px}」などと書いていたのだが、IE6ではこの設定が効かない!
長い前書きですが、そんなこんなでIE6でmin-Widthやmax-heightを適応させる方法です。
IEの独自設定でexpressionを使います。
* html #header { width:expression(document.body.clientWidth < 800? "800px" :document.body.clientWidth > 2000? "2000px" : "auto"); }
以上の記述で、「#header {min-width:800px;max-width:2000px;}」のような設定をIE6にも適用することができます。
widthの所をheightに変えればmin-heightやmax-heightなどの設定もできます。
そんなかんじ。