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

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

top of page

©2017 coliss