てんぽ: 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はなぜかボーダー部分まで可変になってしまいます。 divにwidthかheightを指定するとボーダーの幅は固定されますが、 今度はなぜかp要素の内容がボーダーに隠されてしまいます。 そこでさらに、pとdivにposition: relativeを、 pにdisplay: inline-blockまたはfloat:leftを指定することでようやく機能するようになります。

div {
 border-right:400px solid #fff;
 height:1%;
 position:relative;
}

p {
 margin-right:-400px;
 display:inline-block;
 position:relative;
}

ところで、こんなややこしいことをせずとも、 可変幅のボックスの中に固定幅のボックスを入れておけばいいと考える人もいるかもしれません。 つまり、ウインドウサイズが固定幅を下回った場合に横スクロールが発生するので、 可変幅の部分にも事実上の最小幅を与えられると。

<div>
  <h2>幅固定の見出し</h2>
  <p>ここは可変幅</p>
</div>

div {
 width:90%;
}

h2 {
 width:400px;
}

実際にやってみるとわかるのですが、これだけでは表示領域が400pxを下回ったときにも可変幅の部分は表示領域にあわせて縮められます。 つまり、最小幅にはならないのです。

しかし実は、ここにある条件が加わるとIE6のQuirks Mode（後方互換モード）で最小幅が実現できます。 実際、このブログの今のテンプレではCSSに一行加えるだけで条件を満たしたので、IE6にも有効な最小幅が設定されています。

• IE6(Quirks)で最小幅を実現するサンプル