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

IE は min-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 に対応したパターンの２種類の方法がある。

• 実際に試してみたサンプル

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; を指定していて、いまいちその理由がわかんない。とりあず、今回は外してみたんだけど、特に変わらずにちゃんと機能しているっぽい。もうちっと調べてみる必要がありそう。