Lucky bag::blog: IE で min-width を指定する方法

個別記事

前後の記事

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

この記事が属するカテゴリー: CSS

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

2005-05-16T12:59:19+09:00 | コメント (1) | トラックバック (3) |

トラックバック

このエントリーのトラックバックURL:: http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/230

このリストは、次のエントリーを参照しています: IE で min-width を指定する方法:

ベイエリア情報局さんからのトラックバック: IEでmin-widthを指定する; IE で min-width を指定する方法すごいですね〓。ここまですると脱帽... [続きを読む]; 2005年06月23日 18:59

blogmake - ブログのカスタマイズを試すブログさんからのトラックバック: 擬似min-width; 前回のテンプレートの中にいれてある２段組レイアウト用のCSSの中で、WinIEで擬似的なmin-widthを実現しています。今回はその説明。 [続きを読む]; 2006年08月15日 13:47

Takazudo Clipping* さんからのトラックバック: IE6でmin-width、min-heightを使う; jQueryを使ってmin-width,min-heightを指定するTips。 [続きを読む]; 2007年04月11日 00:41

【通りがかりのものです】さんからのコメント: 面白いですね。参考になりました。
でも、もっとオーソドックスに、以下のようにするのはどうでしょう。
＜html＞
＜body＞
＜div width="100%" style="background-color:lightgrey;"＞
内容
＜table width="400px" height="1px"＞＜tr＞＜td＞＜/td＞＜/tr＞＜/table＞
＜/div＞
＜/body＞
＜/html＞; 2006年02月06日 18:43

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を < 、> を > とそれぞれ置き換えてください。

Lucky bag::blog