[CSS]IEで、min-widthやmax-widthを実現する方法
CSS-Tricksで、IE用に「expression」を使用して、min-width、max-widthを実現する方法がエントリーされていました。
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日
Comments
コエカタマリン MX 2007
on 2008年5月11日
IE6で「max-width」を使って、自動改行されない文字列を制御する方法
clientWidthを基準にして数値を一定の範囲に丸めてしまうという方法ですから、ブロックのレイアウト時にしか使用できません。 今回は、ページ中に不規則に何度も現れる要素のmax-widthを…
ずっと工事中
on 2009年11月3日
IE6のmax-widthとmin-widthと、expressionについての覚え書き [CSS, JavaScript]
max-widthのよくあるサンプル
IE6でmax-widthに対応しようと思って検索してみたらIE独自拡張のexpressionで実現しているケースが多く見られました。概要はこんな感じでしょうか。
*html #container {…
携帯サイトをつくろう。
on 2010年3月22日
max-width属性で横幅を指定する
携帯から投稿された画像を一定の幅以上大きく見せたくない場合があります。 携帯で見せる場合だと画像はプログラムでリサイズするのですが、 PC限定でcssのmax-widthを使ってもう少し簡…