IE6で最小幅を実現する

CSSでボックスの最小幅を指定するには通常min-widthを使いますが、IE6はこれに対応していません。 そこで、IE6で擬似的にmin-widthを実現する方法としてボーダーとネガティブマージンを使うものが知られています。 Lucky bag::blog: IE で min-width を指定する方法 外側のボックスのボーダーで最小幅を確保しておいて、 その上に内側のボックスをネガティブマージンで重ねる。 これだけならHTMLとCSSは次のようにシンプルで済みます。 <div> <p>ここは可変幅だけど最小幅をもつ</p> </div> div { border-right:400px solid #fff; } p { margin-right:-400px; } 実際、Firefoxはこれだけでうまくいきます。 ところが肝心のIE6はなぜかボーダー部分まで可変になってしまいます。

[wablog]

IE で min-width 。これのために後方互換モードはちょっとキツイかも

[hokuto_vii]

min-widthのエミュレーション。内側のボックスをつっかえ棒として使い、外側のボックスに高さを指定。

[nanto_vi]

min-widthのエミュレーション。内側のボックスをつっかえ棒として使い、外側のボックスに高さを指定。

[ysk_lucky-star]

さすがに後方互換モードで、って条件は個人的にｷﾞｬｰｽ

[Fsiki]

後方互換モードで実現可能。

[sst]

borderと-marginと幅・高さ指定

[akiyan]

ハックなしで実現。