IE で min-width を指定する方法のサンプル

この文書は、Lucky bag::blogのエントリー「IE で min-width を指定する方法」のサンプルです。

min-width に対応していない IE で、スクリプトを使わず擬似的に min-width を指定させるための方法です。ウィンドウを縮めていくと下のボックスは 400px でスクロールバーが表示され、それ以上縮まりません。

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

IE5.5 と IE6 でも min-width を擬似的に再現させている。外側のボックスに border-right:400px を指定し、中のボックスに display:inline-block; とネガティブマージンとして margin-right:-400px; を指定することによって、擬似的に min-width を実現させている。

min-width を解釈するブラウザでは見えませんが、IE で閲覧した場合に、分かりやすくするためにボーダーの色を変えている。これを背景色と同じ色にすれば、あたかも min-width が効いているように見える。

参考として、このボックスは幅 400px

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

IE5.01 と IE5.5 と IE6 でも min-width を擬似的に再現させている。外側のボックスに border-right:400px を指定し、中のボックスに float:left; とネガティブマージンとして margin-right:-400px; を指定することによって、擬似的に min-width を実現させている。

min-width を解釈するブラウザでは見えませんが、IE で閲覧した場合に、分かりやすくするためにボーダーの色を変えている。これを背景色と同じ色にすれば、あたかも min-width が効いているように見える。