category
サイト構築 -CSS

[CSS]IEで、min-widthやmax-widthを実現する方法

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

CSS-Tricksで、IE用に「expression」を使用して、min-width、max-widthを実現する方法がエントリーされていました。

min-width, max-widthの箇所は、expressionで記述したレイアウトのキャプチャ

The Perfect Fluid Width Layout

デモページでは、最小幅780pxを維持しつつ、最大幅1280px以上になると残りの箇所は背景画像が表示されるようになっています(参照:キャプチャ画像)。

min-width、max-widthの箇所は、下記のように記述されています。

#page-wrap{
  background: white;
  min-width: 780px;
  max-width: 1260px;
  margin: 10px auto;
  width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto");
}

「expression」とは、IE5から使用できるIE独自の「Dynamic Property」で、スタイルシート内でJavaScriptを実行できるというものです。
About Dynamic Property

どこかで見た記憶があるな、と思ったら下記にもありました。
Min-width and Max-width template

Post on:2007年10月11日

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

トラックバック

トラックバック(URL)

コメント

comment:

コエカタマリン MX 2007
on 2008年5月11日

IE6で「max-width」を使って、自動改行されない文字列を制御する方法

clientWidthを基準にして数値を一定の範囲に丸めてしまうという方法ですから、ブロックのレイアウト時にしか使用できません。 今回は、ページ中に不規則に何度も現れる要素のmax-widthを…

ページの先頭へ




© coliss

RSS