てんぽ: IE6で最小幅を実現する

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

IE6で最小幅を実現する

2006年12月18日(月)

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にwidthheightを指定するとボーダーの幅は固定されますが、 今度はなぜか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にも有効な最小幅が設定されています。

#122
カテゴリ:HTML・CSS
タグ[ CSS HTML IE ]

(-2件)

N:Re: IE6で最小幅を実現する

min-widthはリキッドデザインのためにあるプロパティだから、幅を指定した要素の中身が折り返してしまう。
幅を指定した要素の中には長い文字列やオブジェクトを入れないようにするという解決案では、マークアップ本来の意味から外れている。

  • 2006年12月18日(月)19:29:36
  • URL
みりばーる:>Nさん

>幅を指定した要素の中には長い文字列やオブジェクトを入れないようにするという解決案
ではなくて、短い文字列しか入らないことがわかっている要素(たとえば常に日付だけが入るボックスというのはありえます。)の幅を固定するわけです。そういう要素がなければこの方法はあきらめます。

  • 2006年12月19日(火)00:21:08
  • URL
  • 編集
コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/122-38cda5d0

<<blockquoteで切る | Last regrets収録のCD>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。