IE6用max-width・min-width

前の記事: Prev
ホーム: Home
次の記事: Next

IE6用max-width・min-width

11:35

[！注意！]

この記事の情報は「やってみたらできた」というメモ程度の内容＋古い情報です。Javascriptについての知識もあまり持ち合わせていないため、深い考察などもできていません。ご了承ください。

2010/02/10
さすがにメモ程度の内容で検索の上位に表示されてしまう（なぜ……）のはどうなの、ということで記事の改訂をしようと思ったのですが、既にかなり詳しく解説されているページがありましたのでそちらを紹介させていただきます。
ずっと工事中【IE6のmax-widthとmin-widthと、expressionについての覚え書き [CSS, JavaScript]】

古い情報です。取り扱いにご注意ください。

このエントリーでは、ページ全体の幅を下限・上限有りのリキッドレイアウトとすることを目的としたTipsの紹介をしていきます。

・　・　・

「Nefert」で配布しているテンプレートは、ウィンドウサイズにあわせて幅が変化するリキッドレイアウトを採用しています。

リキッドレイアウトは、表示するウィンドウサイズに合わせて自動的に表示幅が変化するため、画面が大きい環境でも小さい環境でも（それなりに）うまく表示されるというのが利点です。ただし、リキッドレイアウトは「画面幅がどれくらい大きくなるか分からないので、用意する画像も必要以上に大きくなってしまう」という弱点もあります。

その弱点を補い、リキッドレイアウトの利点を生かすために用いられるのが、max-width、min-widthというCSSのプロパティです。

このプロパティは、それぞれ要素の最大幅・最小幅を指定することができます。
max-width、min-widthを指定することで、画面が小さい時には余裕を持たせて表示し、画面が大きいときには大きくなりすぎないように幅を抑制するといった柔軟な表示が可能になります。また、max-widthを指定することで、用意する画像サイズも必要以上に大きくならないようにすることができます。

ただし、max-width、min-widthプロパティは、IE6では対応しておらず、使うことができません。

そこで、IE6に対してはjavascriptのexpressionメソッドを用いて擬似的にmax-width、min-widthプロパティを適用させています。なお、expressionプロパティを導入すると、ブラウザの動作が重くなるという情報もあり、注意が必要です。
→expressionについて（追加情報）

動作を軽くするため、イベントハンドラを使って演算回数を減らすことが推奨されていますが、expressionは一部のイベントハンドラが動作しないといった不透明な仕様になっているため、ここでは確実に動作することを優先し、イベントハンドラの導入を取りやめました。

なお、min-widthだけを指定したいのであれば、expressionを使わずCSSのみで実現可能です。くわしくはこちら。
Lucky bag::blog: IE で min-width を指定する方法

・　・　・

まずHTMLは、<body>直下に<div id="wrapper">という包括要素をおいておきます。

<body>
  <div id="wrapper">
  
  </div>
</body>

IE7やFirefox、Opera、Safariといった、max-width、min-widthに対応しているブラウザに対しては、そのままmax-width、min-widthを指定しています。
ここでは例として、最大幅を900px、最小幅を600pxに設定していくことにします。

#wrapper {
  max-width : 900px;
  min-width : 600px;
}

IE6に対してはスターハック（IE6以下でのみ読み込まれるようにするCSSハック）を用いてexpressionメソッドを使用します。

/* hide from Mac IE \*/
* html #wrapper {
  width : 800px;
  width : expression(
  (document.documentElement.clientWidth > 900)? "900px" :
  (document.documentElement.clientWidth < 600)? "600px" :
  "auto");
  height : 1%;
}
/* end MacIE */

まず、javascriptを使用しないようにされている閲覧者に対しては、表示に問題が生じない幅で固定させてしまいます。
javascriptが使用できる場合は、expressionによってwidthの値を上書きし、幅を可変にします。
処理内容は「表示領域の幅が900px以上だったらwidth : 900px;に、600px以下だったらwidth : 600px;にするよ。それ以外は自動的に変化していいや」という感じです。「height : 1%;」はhasLayout関係でとりあえず記述してます。

「max-width IE6」という風に検索すると、「document.documentElement.clientWidth」ではなく「document.body.clientWidth」で同様の方法を紹介しているページが多数あります。これはIEの互換モード・標準モードの違いのようです（前者が標準モード、後者が互換モード用の記述）。
最初、互換モード用の記述を使ったのですが、画面サイズを変更するとある条件下でブラウザがフリーズするという状況に陥ったので、標準モード用の記述を使うようにしました。互換モードで使用する場合は互換モード用の記述にした方が良いかもしれません。

ちなみに、max-width、min-widthで直接指定している値とexpressionで指定している値が違うのは、IE6は内容にあわせて指定したサイズよりも幅が大きくなってしまうというバグがあることを考慮した結果です。
間違いでした。
「document.documentElement.clientWidth」はブラウザの表示領域の幅を返すため、max-width・min-widthを適用させる要素の親要素にwidth・margin・padding・border、自身にmargin・padding・borderなどが設定されていると、expressionで条件式で使う値と代入する値とを変えなければいけません。ここは面倒ですが、ボックスモデルにしたがって指定する値を算出してください。
たとえば、<body>にpadding-left20px;padding-right:20px;が設定されているときは、次のようにします。

/* hide from Mac IE \*/
* html #wrapper {
  width : 800px;
  width : expression(
  (document.documentElement.clientWidth > 940)? "900px" :
  (document.documentElement.clientWidth < 640)? "600px" :
  "auto");
  height : 1%;
}
/* end MacIE */

参考にしたページは以下の通りです。感謝！
[css][javascript] IE の expression を利用した min-width,max-width の実現とか
CSSとJavaScriptでmin-width max-width を実装する
ブラウザの表示領域のサイズを取得する方法。 - Enjoy*Study
ダイナミックプロパティ expression() のまとめ

関連記事

前の記事: うわぁああ
ホーム: Home
次の記事: Exnihiloの構造見直し

濃鯉恋 | -

Re: IE6用max-width・min-width

＞・・・ブラウザがフリーズするという状況に

まさにその状況を打開しようと試みていましたが、document.documentElement.clientWidthで動作を確認できました。
貴重な情報ありがとうございます。

ie6のmin-width問題はこれで解決、次は透過png問題・・・

( 01:38 )
rimse | 4HNZ8mMg

Re: IE6用max-width・min-width

お役に立てたようで光栄です！

透過pngもIE6で使えるようにするスクリプトが多く紹介されていますが、背景に設定する場合などは不具合があるようで、毎度のことながらIE6には悩まされますね…。

( 22:57 [Edit] )
　 | -

ここへ来た人のために。

実はmax-widthに関してのみ、指定した透明なテーブルで囲めば同じ役割が果たせたりします。おためしあれ

( 23:51 )

コメントの投稿

名前 :
タイトル :
メールアドレス :
URL :
本文 :
パスワード :: (コメントの編集・削除時に必要)
非公開コメント :: (管理者にだけ表示を許可する)

質問の際のお願い

テンプレートに関する質問は、それぞれのテンプレート専用の記事にて受け付けています。トップページの「Templates Information」から、各テンプレート用の記事へリンクが張ってあります。

質問の際には、情報の共有のため非公開コメントはご遠慮くださいませ。
また、使用しているバージョンによって編集内容が異なる事があるため、多くの場合ソースコードの確認が必要になります。出来る限りブログのURLを入力してください。ブログのURLを公開したくない場合は、質問内容を公開コメントで投稿した後、非公開コメントにてブログのアドレスを追加投稿してくださいませ。

質問以外のコメントは、ご自由にコメントしていただいて結構です。たくさんのコメントお待ちしております。

トラックバック

Trackback URL

Trackbacks

【解決済み】AdobeサイトでIEフリーズ ( 15:03 )

　お盆前に解決したネタです。　アップしようかどうか迷いましたが、経緯が面白かったので、メモ。

前の記事: うわぁああ
ホーム: Home
次の記事: Exnihiloの構造見直し

Profile

Author:rimse
ペンギンを愛してやまないペンギン病患者。
LOVEペンギン。

ただいまお仕事でえらいこっちゃしてます。

ブログのテンプレ作ってました。
共有テンプレートのページで、作者「rimse」と検索すると出てきます。
シンプルめのテンプレが多いかも。

Calender

09 | 2023/10 | 11
日	月	火	水	木	金	土
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31	-	-	-	-

RSSフィード

Search

Credit

スタイル切り替えスクリプト: [stylechange.js] Re:move!
Aquaria: [photo] "Blue Water" / fox_kiyo (Flickr)
Fiore: [photo] "Good night dahlia 2"/tanakawho (flickr)
Silence: [photo] "Noche de luna llena"/*L*u*z*a* (flickr)
Snowdance: [photo] "Snow Magic"/katmere (Flickr)
Fragment: [photo] "In the Streets"/Rodrigo Cayo (I LOVE ANALOG) (Flickr)
Day-out: [photo] "Antarctica: Penguin Hunting"/elisfanclub (Flickr)
Ad-Astra: [photo] "Kilimanjaro"/Stig Nygaard (Flickr)
Fall-time: [photo] "against the white sky"/Ozyman (Flickr); [icon] "Fugue Icons"/pinvoke
Exnihilo: [icon] "Fugue Icons"/pinvoke
Manicstar: [photo] "Elements of Light"/Fort Photo
Lostsky: [photo] "Lost to the Sky"/Drown
Daylight: [photo] "the grass is greener here"/hufse; [photo] "Seeing the Forest for the Trees"/synapse
Suspire: [photo] "Lying Cat"/d'n'c
Amaris: [photo] "Bev & Ryan"/aprillynn77
Herba: [photo] Encyclorecorder
Birdcall
CertaPax
Rera: [photo] ShippoShappo

Nefert : IE6用max-width・min-width