2006年12月18日(月) コメント:2 トラックバック:0
CSSでボックスの最小幅を指定するには通常min-width
を使いますが、IE6はこれに対応していません。
そこで、IE6で擬似的に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にも有効な最小幅が設定されています。
コメント(2件)
min-widthはリキッドデザインのためにあるプロパティだから、幅を指定した要素の中身が折り返してしまう。
幅を指定した要素の中には長い文字列やオブジェクトを入れないようにするという解決案では、マークアップ本来の意味から外れている。
>幅を指定した要素の中には長い文字列やオブジェクトを入れないようにするという解決案
ではなくて、短い文字列しか入らないことがわかっている要素(たとえば常に日付だけが入るボックスというのはありえます。)の幅を固定するわけです。そういう要素がなければこの方法はあきらめます。