IE で min-width を指定する方法

IEmin-width に対応していないんだけど、「Stu Nicholls | The CSS Playground」でスクリプトを使わず CSS だけで擬似的に min-width を指定する方法が紹介されていたんで、ざっくりとご紹介。この方法は、Win IE のみに効く方法で、Mac IE では機能しない模様。サンプルとして下記の (X)HTML を使用してみる。

<div class="container">
<div class="box">
<div class="contents">
内容
</div>
</div>
</div>

これに対して、幅 90% で最小幅 400px の指定をしてみる。IE5.5 と IE6 に対応したパターンと IE5.01 と IE5.5 と IE6 に対応したパターンの2種類の方法がある。

IE5.5 と IE6 に対応したパターン

IE5.5 と IE6 を対象ブラウザとした場合の CSS コードは下記を指定。

/*min-width を解釈するブラウザ向け*/
.container {
        position: relative;
        width: 90%;
        min-width: 400px;
}
/*IE5.5 と IE6 に対応したパターン*/
* html .container {
        border-right: 400px solid #dddddd;
}
* html .box {
        display:inline-block;
        position:relative;
        margin-right:-400px;
}

最初に min-width を解釈するブラウザ向けに指定を行い、その後に IE のみに指定させるため Star html Selector Bug を使って指定を上書きさせている。ポイントは、外側のボックスに border-right: 400px を指定し、中のボックスに display:inline-block; とネガティブマージン margin-right:-400px; を使用している所。

IE5.01 と IE5.5 と IE6 に対応したパターン

IE5.01 と IE5.5 と IE6 を対象ブラウザとした場合の CSS コードは下記を指定。

/*min-width を解釈するブラウザ向け*/
.container {
        position: relative;
        width: 90%;
        min-width: 400px;
}
/*IE5.01 と IE5.5 と IE6 に対応したパターン*/
* html .container {
        border-right: 400px solid #dddddd;
}
* html .box {
        float:left;
        position:relative;
        margin-right:-400px;
}

こちらも同じく、最初に min-width を解釈するブラウザ向けに指定を行い、その後に IE のみに指定させるため Star html Selector Bug を使って指定を上書きさせている。ポイントは、外側のボックスに border-right: 400px を指定し、中のボックスに float:left; とネガティブマージン margin-right:-400px; を使用している所。

未確認な部分

以上で実現できるはずなんだけど、未確認な部分がある。ネタ元の方では、min-width を解釈するブラウザ向けの指定で、内側のボックス(当サイトの例では .box)に display: block; を指定していて、いまいちその理由がわかんない。とりあず、今回は外してみたんだけど、特に変わらずにちゃんと機能しているっぽい。もうちっと調べてみる必要がありそう。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: https://www.lucky-bag.com/mt/mt-tb.cgi/160

ベイエリア情報局 - IEでmin-widthを指定する (2005年6月23日 18:59)

IE で min-width を指定する方法 すごいですね〓。ここまですると脱帽... 続きを読む

blogmake - ブログのカスタマイズを試すブログ - 擬似min-width (2006年8月15日 13:47)

前回のテンプレートの中にいれてある2段組レイアウト用のCSSの中で、WinIEで擬似的なmin-widthを実現しています。今回はその説明。 続きを読む

Takazudo Clipping* - IE6でmin-width、min-heightを使う (2007年4月11日 00:41)

jQueryを使ってmin-width,min-heightを指定するTips。 続きを読む

Comments

【通りがかりのものです】 said:

面白いですね。参考になりました。
でも、もっとオーソドックスに、以下のようにするのはどうでしょう。
<html>
<body>
<div width="100%" style="background-color:lightgrey;">
内容
<table width="400px" height="1px"><tr><td></td></tr></table>
</div>
</body>
</html>